| 纯前端实现下载静态资源文件（excel/pdf/word） | 您所在的位置：网站首页 › vue怎么下载文件 › 纯前端实现下载静态资源文件（excel/pdf/word） |
纯前端实现下载静态资源文件（excel/pdf/word）
|
1、应用场景和静态资源文件存放路径
（1）、应用场景：
什么时候适用纯前端下载静态资源文件呢？ 前端做静态资源的下载适合固定的数据，不和数据库交互的数据，比如一些“excel模板”、比如“注意事项.docx”文档什么的，下载一些模板类的东西。反之，后端做会更加合适。 （2）、静态资源前端存放路径：在我们做vue项目的public文件夹下新建static文件夹，这个文件夹存放的我们需要下载的静态资源文件，如下图，这里我存放了一个 员工信息.xlsx文件，待会需要下载这个文件。当然static文件夹存放pdf文件、word文件什么的都可以的。 注意，这里要在public文件夹中新建文件夹存放静态资源，不能在src文件夹中新建文件夹存放静态资源，因为public文件夹中的文件资源不会被npm run build打包编译。大家打包一下，就会发现 员工信息.xlsx文件是存放在dist/static文件夹中的 2、写下载有关逻辑代码点击按钮下载静态资源文件 本地下载 export default { data() { return {}; }, methods:{ //2、主要方法 frontDownload() { var a = document.createElement("a"); //创建一个标签 a.href = "/static/模板.xlsx"; //给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点. a.download ="下载啦.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可 a.style.display = "none"; // 障眼法藏起来a标签 document.body.appendChild(a); // 将a标签追加到文档对象中 a.click(); //模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了 a.remove(); // 一次性的，用完就删除a标签 } } } 3、原理借助a标签具有下载文件的功能，来实现纯前端静态资源的下载 |
【本文地址】
公司简介
联系我们