Vue下载excel文件模板，Vue 下载本地静态资源static文件夹

最新推荐文章于 2025-07-14 10:12:14 发布

coldriversnow

最新推荐文章于 2025-07-14 10:12:14 发布

阅读量29

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

原文链接：https://www.cnblogs.com/wwll2020/p/16734052.html

在Vue CLI3项目中，由于打包时assets目录下的文件路径不固定，为实现本地docx文档下载，需将文件放在public/static下。通过`<a>`标签的href属性指定 `/static/serviceAgreement.docx` 的路径，并设置download属性实现下载。注意不同Vue CLI版本对静态资源位置的要求，Vue CLI2需要放在static，而CLI3及以上版本则应放入public。

下载静态文件方法：

 <a href="/static/serviceAgreement.docx" download="下载"></a>

下载;

项目需要下载本地的docx文档，文档是放在本地的没有在服务器，所以需要下载本地静态资源文件，开始把文件放在了这里src目录下的assets资源文件下

下载报错找不到文件路径查找原因是因为项目用的是vue-cli3, 在打包的时候并不知道会把assets

下的文件打包在哪里，但是在build的时候发现在根目录下的文件是打包在当前路径下的
所以我们要把需要下载的静态资源放在public文件夹下的static文件夹下就可以了

你可能在输入路径的时候会提示你是src,而不直接是static,但是你还是要直接输入static这个路径

 <a href="/static/serviceAgreement.docx" download="服务协议"></a>

需要注意的是：cli2需要把要下载的文件放在static下面；cli4需要将文件放在public里面才不会被打包。

注意：href 指向项目中pdf文件的路径（不要出现中文），download 就是重命名的文件名，不设置的话就是默认文件名

发现vue版本是 3.0+ 所有把要下载的文件直接放到public文件夹中（最好英文名字）

原文链接：https://blog.csdn.net/qq_44848480/article/details/123658845

Vue下载excel文件模板

注意：

1.模板一定是英文名

2.使用相对于index.html的路径

3.a标签同理

第一步：

vue2.0版本的在项目根目录下的static文件夹，放入“文件模板.xlsx”文件。

vue3.0版本的在项目public目录下新建static文件夹，放入“文件模板.xlsx”文件。

第二步：

在按钮中加入事件

<el-button icon="el-icon-download" size="medium" @click="downloadTemplate">模板下载</el-button>

   downloadTemplate() {
      // 使用相对路径
      const fileUrl = '/static/template.xlsx'';
      // 创建一个隐藏的a标签
      const link = document.createElement('a');
      link.href = fileUrl;
      link.download = 'template.xls';  // 设置下载文件名
      // 将a标签添加到DOM并触发点击事件
      document.body.appendChild(link);
      link.click();
      // 移除a标签
      document.body.removeChild(link);
    },

Vue下载excel文件模板 - 往暮 - 博客园