vue本地pdf或excel等文件下载实现
1.需求确定
最近在项目中要点击“帮助文档”，下载《系统操作手册》。
也就是获取静态资源文件export.pdf，将pdf文档下载至本地。
拿到这个需求后，找了些方案，如下：
- 方案1：在vue cli中安装一些插件，如jquery，利用jquery下载本地文件；
- 方案2：直接使用原生ajax下载本地文件；
- 方案3：利用axios请求；
最后考虑到项目中已经在使用axios，就采用方案3。
2.具体内容
在使用过程中发现问题记录如下：
项目1：vue 2.0 + element ui+es5中
利用a标签，给个点击事件download()
<a id="attname" class="attname" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" @click="download">帮助文档</a>
页面已经引用过axios，使用如下：
import axios from 'axios';
Download方法中为避免无法导出，将待导出文件名称改为英文“export.pdf”，导出后的名称设置为中文名称“系统操作手册.pdf”；
待导出文件放在“static”文件夹下；
download(){
axios.get('static/export.pdf', {
responseType: 'blob', //重要
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
let fname = '系统操作手册.pdf';
link.href = url;
link.setAttribute('download', fname);
document.body.appendChild(link);
link.click();
});
}项目2：vue 3.0 + iview ui+typescript中
利用a标签，给个点击事件download()
<a id="attname" class="attname" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" @click="download">帮助文档</a>
页面已经引用过axios
import axios from 'axios';
Download方法中为避免无法导出，将待导出文件名称改为英文“export.pdf”，导出后的名称设置为中文名称“系统操作手册.pdf”；
在“public”文件夹下建“export”文件夹，放待导出文件；
download(){
axios.get('export/export.pdf', {
responseType: 'blob', //重要
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
let fname = '系统操作手册.pdf';
link.href = url;
link.setAttribute('download', fname);
document.body.appendChild(link);
link.click();
});
}
其中，在项目2的使用过程中遇到了问题，将待下载文件放在“static”或“assets”文件夹下，始终获取不到待下载文件，不同的后缀的文件“.json、.ts”等都是404找不到，如下:
经过一天的问题查找，发现vue cli3.0中静态资源文件夹为“public”，在“public”文件夹下建“export”文件夹，放待导出文件“export.pdf”后，返回状态码200，下载正常：
3.总结
vue cli2.0的静态文件是static
vue cli3.0的静态文件是public
童鞋们使用过程中千万不要搞错了，会获取不到本地文件的
注：除本文中pdf文件外，还可下载其他格式为文件，使用方式类似；
记录一下，以备查询使用；
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue中created、watch和computed的执行顺序详解
由于vue的双向数据绑定,自动更新数据的机制,在数据变化后,对此数据依赖 的所有数据,watch事件都会被更新、触发,下面这篇文章主要给大家介绍了关于vue中created、watch和computed的执行顺序,需要的朋友可以参考下2022-11-11
Face-api.js是一个JavaScript API,是基于tensorflow.js核心API 的人脸检测和人脸识别的浏览器实现,这篇文章主要给大家介绍了关于如何使用VUE+faceApi.js实现摄像头拍摄人脸识别的相关资料,需要的朋友可以参考下2023-05-05
本篇文章主要介绍了vue axios 二次封装的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了Vuex总体案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
在我们使用Vue开发时,经常会用到CSS,下面这篇文章主要给大家介绍了关于Css中该如何使用Vue变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了如何解决vue项目打包后文件过大问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在 Vue 2 和 Vue 3 中,双向数据绑定（主要通过 v-model 实现）可能会在一些特定场景下失效,这些情况通常与 Vue 的响应式系统限制或不正确的用法有关,以下是两者的主要失效场景和解决办法,需要的朋友可以参考下2025-09-09
在Vue组件中定义表格的数据模型,通常使用一个数组来存储表格的数据,每一行数据可以是一个对象,对象的属性对应表格的列,这篇文章主要介绍了Vue实现一个动态添加行的表格步骤详解,需要的朋友可以参考下2024-05-05
这篇文章主要给大家介绍了关于vue3使用ref获取dom结果为'null'的原因详析,ref是Vue3中一个非常重要的功能,它可以用来获取DOM节点,从而实现对DOM节点的操作,需要的朋友可以参考下2023-07-07
本文主要介绍了vue实现登陆页面开发实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
最新评论