前端js下载本地模板

做一件事，要认真，细心，耐心。记忆开始之初，父母，老师都开始教导的真理，现在工作了，这教导还在，但是这些事情却还是没有做好。昨天，老大审查代码，发现之前的写的下载模板过于复杂，而且在ie环境下还不能执行，所以我就开始的改版了。审查自己的代码，在ie环境下运行，试错方法就是把代码添加一个新的环境判断，这样在ie 环境下就可以了。可是问题又来了，在edge环境下面竟然能执行两次，这是不能容忍的部分，所以果断的采用了简单的方法，放弃了更为复杂的方法。

下面可以看下代码的修改过程：
vue 项目中 a标签下载本地的固定模板

…/tpl/SKU_templateV1.1.xlsx 是要放在项目的根目录处 的

<a @click.prevent="downloadItem('../tpl/SKU_templateV1.1.xlsx')" href="../tpl/SKU_templateV1.1.xlsx"
          ></a>

 downloadItem(url) {
       axios.get(url, { responseType: "blob" }).then(({ data }) => {
         let blob = new Blob([data], { type: "application/vnd.ms-excel" });
        let link = document.createElement("a");
         link.href = window.URL.createObjectURL(blob);
         link.download = url.split("/").pop();
         // for IE
         if (navigator.msSaveBlob) {
           navigator.msSaveBlob(blob, "SPU_templateV1.1.xlsx");
         }
         link.click().catch(error => {
          console.error(error);
         });
       });
     },

downloadItem这个方法是有缺陷的自己没有发现，被老大给发现了，edge 中会下载两次，这是因为iE不支持download 属性，但是edge 中支持这个属性，同时又是ie环境。

方法二

   <a download href="../tpl/SKU_templateV1.1.xlsx"></a>

应该都是通用的吧，只是下载的方式不怎么一样，在IE中需要用户确认保存才可以，其他的浏览器都是直接下载的。