vue-public静态文件下 实现下载文件

第一步:首先要把自己所需要下载的文件放入public文件下

第二步:参考以下代码:

  <el-button type="primary" size="mini" @click="downloadAttachment">下载</el-button>

    downloadAttachment() {
      console.log("尝试下载文件...");
      const attachmentUrl = "/static/files/事故档案.docx";
      const link = document.createElement("a");
      link.href = attachmentUrl;
      link.download = "事故档案.docx";
      document.body.appendChild(link); // 很重要，添加到 DOM
      link.click();
      document.body.removeChild(link); // 下载完后移除
    },

第三步:注意点

出现这种情况的原因 是因为路径不对,选择相对路径 可以a标签检查下自己的路径  

<a href="/static/files/事故档案.docx" download>下载事故档案</a>