纯前端下载

web前端

图片下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 图片下载
export function downloadIamge(imgsrc, name) {
    //下载图片地址和图片名
    var image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    image.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var _dataURL = canvas.toDataURL("image/png");
        console.log(_dataURL);
        var blob_ = dataURLtoBlob(_dataURL); // 用到Blob是因为图片文件过大时，在一部风浏览器上会下载失败，而Blob就不会

        var url = {
            name: name || "图片.png", // 图片名称不需要加.png后缀名
            src: blob_,
        };

        if (window.navigator.msSaveOrOpenBlob) {
            // if browser is IE
            navigator.msSaveBlob(url.src, url.name); //filename文件名包括扩展名，下载路径为浏览器默认路径
        } else {
            var link = document.createElement("a");
            link.setAttribute("href", window.URL.createObjectURL(url.src));
            link.setAttribute("download", url.name);
            document.body.appendChild(link);
            link.click();
        }
    };
    image.src = imgsrc + '?time=' + new Date().valueOf();;

    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(","),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 其他下载方式
// https://www.npmjs.com/package/web-downloadfile
// yarn add web - downloadfile
import { base64ToFileOrBlob, saveFileToBlob, saveFileToLink } from 'web-downloadfile';
// 1.其他
import { base64ToFileOrBlob } from 'web-downloadfile';
let Blob = base64ToFileOrBlob(base64, '', true);
// or
base64ToFileOrBlob(base64, '', false);
// 2.excl
import { saveFileToBlob } from 'web-downloadfile';
saveFileToBlob(Blob, 'test', 'xlsx');
// js-export-excel 前端下载
// 3.jpg
import { saveFileToLink } from 'web-downloadfile'
saveFileToLink(link, 'test', 'jpg', fn);
// 4.pdf
import { saveFileToLink } from "web-downloadfile";
export function pdfSave(url, name) {
    saveFileToLink(url, name, "pdf", () => { });
}

其他文件下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function download(Url) {
  const x = new window.XMLHttpRequest();
  x.open("GET", this.baseURL + Url, true);
  x.responseType = "blob";
  x.onload = () => {
    const url = x.response;
    const a = document.createElement("a");
    a.download = Url.split("/").reverse()[0];
    a.style.display = "none";
    a.target = "_blank";
    let blob = new Blob([url]);
    a.href = URL.createObjectURL(blob);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
  x.send();
},