js、vue中文件下载多种方法

下载一个图片或者文件，我们可以用 a 标签下载 资源在同一服务器的图片或文件。

1.window.open(url) 只能下载文件，图片只能预览，并且屏幕会闪一下。

2.iframe 屏幕不会闪一下，但是适合下载文件，不适合下载图片。

const iframe = document.createElement('iframe');

iframe.src = file.FJDZ;

iframe.style.display = 'none';

document.body.appendChild(iframe);

setTimeout(() => {

    document.body.removeChild(iframe);

}, 1000);

3.a标签下载

let saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

saveLink.href = item.FJDZ;

saveLink.download = item.FJMC;

saveLink.target = '_blank';

saveLink.click();

4.能下载文件、图片，并且也不会闪一下，个人认为是最合适的方法。

let link = document.createElement('a')

let url = file.FJDZ;

fetch(url).then(res => res.blob()).then(blob => {

    link.href = URL.createObjectURL(blob)

    link.download = file.FJMC;

    document.body.appendChild(link)

    link.click()

});

5.解决图片不同源下载问题

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 url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素

        var event = new MouseEvent("click"); // 创建一个单击事件

        a.download = name || "photo"; // 设置图片名称

        a.href = url; // 将生成的URL设置为a.href属性

        a.dispatchEvent(event); // 触发a的单击事件

    };

    image.src = imgsrc;

},