a标签download下载

download 属性定义了下载链接的地址。
href 属性必须在 标签中指定。
download 属性同样可以指定下载文件的名称。文件名称没有限定值，浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。

function down() {
   const image = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1112%2F032219114926%2F1Z322114926-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644485364&t=a6992072f49536a23f22f2943946684f'
    //download(image, 'loadImg')
    // download('./demo1.pdf', 'loadPdf')
    download('./index.doc', 'loadRar')
};
/**
 * @params {} 下载资源地址和文件名
*/
function download(url, name) {
    console.log(/\//g.test(url))
    // if(url && /\//g.test(url)) {
        let a = document.createElement("a"); // 生成一个a元素
        // let event = new MouseEvent("click"); 
        a.download = name || "myload"; // 设置下载文件/图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.target="_blank" 
        a.click() // 创建一个单击事件
    // }
}

浏览器能打开的文件（如图片、pdf），浏览器会直接打开，不能打开的文件（如doc文档），会直接下载。浏览器打开的文件，可以手动下载。对此，可以转换图片资源的路径，让浏览器不可直接解析。

• way1: 使用fetch获取blob

// fetch抓取图片数据
 fetch(imageUrl).then(response => {
     console.log(response)
     if( response.status == 200 )
         // 返回的.blob()为promise，然后生成了blob对象，此方法获得的blob对象包含了数据类型，十分方便
         return response.blob()
     throw new Error(`status: ${response.status}.`)
 }).then(blob => {
     // 获取到blob对象
     downloadFile(blob, name)
 }).catch(error=> {
     console.log("failed. cause:", error)
 })

// 设置a标签的路径
 const src = URL.createObjectURL(blob);
 a.href = src;

• way2: 将canvas保存成图片后下载

// canvas转图片
const imageUrl = canvas.toDataURL("image/png")

• way3: file-saver

<script>
import { saveAs } from 'file-saver';
...
// canvas转二进制之后调用
canvas.toBlob(function(blob) {
  saveAs(blob, "image.png");
});
...
</script>