Vue 之 下载本地资源文件

Posted 2021-12-13 zhuangwei_8256

利用 a 标签实现，这里需要注意的是：

• 我们这里的本地资源文件是放在 public 下的（不建议放在 assets 目录下）；
• 这里需要区分生产环境和开发环境，如果你的项目部署到服务器上的某个目录下（比如 test 目录下），那么你需要在给 a 标签绑定路径的时候也是需要做下区分的，开发环境直接 / 就可以，但是部署到生产环境之后一定要在你的路径前面加上你项目部署的那个目录名称（如代码所示）；

封装一个方法：

let prefixUrl = process.env.NODE_ENV === 'production' ? '/test/' : '/';
// 下载本地资源文件
// file 文件全称包含文件扩展名
// fileName下载下来的文件名称（自定义）
function downloadLocalFile(file, fileName) {
    let a = document.createElement('a');
    // 路径中'/'为根目录，即index.html所在的目录
    a.href = prefixUrl + 'static/downloadFile/' + file;
    // 下载下来的文件名
    a.download = fileName;
    // 添加点击
    a.click();
}

文件中调用（我这里是将公共方法在 main.js 里绑定给vue原型了，点击查看详情）：

downLoadFile() {
    this.$public.downloadLocalFile('test.doc', '测试')
}

 
 

  如有不足，望大家多多指点！ 谢谢！