记录前端踩坑·····不定时更新

问题一、前端要求a标签下载所有文件
代码：

  const eleLink = document.createElement("a"); // 新建A标签
        eleLink.href = url; // 下载的路径
        eleLink.download = `${title} - ${artist}`;  // 设置下载的属性，可以为空
        eleLink.style.display = "none"; 
        document.body.appendChild(eleLink);
        eleLink.click(); // 触发点击事件
        document.body.removeChild(eleLink);

上面的代码可以实现下载所有的文件，但是这里面有坑啊！！！兄弟们！
只要是浏览器能识别的文件就会在可直接打开，其他无法识别的文件可以下载 ，如.zip。
download 只在同源 URL 或 blob:、data: 协议起作用。
这是mdn的详细解释有兴趣可以看一下
也就是说如果你的图片地址和当前的地址不一样download不起作用，会直接打开。
解决办法
1.如果是图片，则可以用canvas方式保存图片在下载

 let image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    // 图片加载
    image.onload = function() {
      // 新建 canvas标签
      let canvas = document.createElement("canvas");
      // 设置 canvas宽高
      canvas.width = image.width;
      canvas.height = image.height;
      // 添加 canvas画笔
      let context = canvas.getContext("2d");
      // 绘制图片
      context.drawImage(image, 0, 0, image.width, image.height);
      // 得到图片的 base64 编码
      let url = canvas.toDataURL("image/png");
      // 新建 a标签
      let a = document.createElement("a");
      // 新建点击事件
      let event = new MouseEvent("click");
      // 将图片的 base64 编码，设置为 a标签的地址
      a.href = url;
      // 触发点击事件
      a.dispatchEvent(event);
    };
    // 将图片地址 设置为 传入的参数 imgsrc
    image.src = imgsrc;

2.使用file-saver导出文件

	import { saveAs } from 'file-saver'
	const blob = new Blob(['Hello, world!'])
    saveAs(blob, 'hello world.txt')

3.其他处理方法待补充