vue中使用a标签下载静态资源文件（比如excel、pdf等）后端不参与

问题描述

平常我们在项目中需要做下载文件的功能，比如下载excel表格、比如下载pdf文件、比如下载word文档，这样的功能，一般是后端做，即：后端返回一个流文件、或者返回一个url地址…

但是，实际上，前端也是可以做的。很简单，使用a标签的下载功能即可。不过要注意静态文件存放的位置。

注意，前端做静态资源的下载适合固定的数据，不和数据库交互的数据，比如excel模板、比如注意事项.docx文档什么的。反之，后端做会更加合适。

步骤

第一步，public文件夹下新建static文件夹存放静态资源

在我们做vue项目的public文件夹下新建static文件夹，这个文件夹存放的我们需要下载的静态资源文件，如下图，这里我存放了一个模板.xlsx文件，待会需要下载这个文件。当然static文件夹存放pdf文件、word文件什么的都可以的。static文件夹下也可以再建文件夹精细化存放，只要a标签下载的时候路径对得上即可，这里不赘述。

注意，这里要在public文件夹中新建文件夹存放静态资源，不能在src文件夹中新建文件夹存放静态资源，因为public文件夹中的文件资源不会被npm run build打包编译。大家打包一下，就会发现模板.xlsx文件是存放在dist/static文件夹中
第二步，模拟a标签下载文件即可

假设我们是点击按钮下载静态资源，代码如下：

// html
<el-button type="primary" plain @click="frontDownload">本地下载</el-button>

//js
frontDownload() {var a = document.createElement("a"); //创建一个<a></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标签
}

如果是后端返回文件地址的那种形式，a.href的值就是后端返回的地址。

总结

上述代码便可以实现a标签访问前端静态资源，并下载的功能。好记性不如烂笔头，记录一下吧

vue中使用a标签下载静态资源文件（比如excel、pdf等）后端不参与相关推荐

vue项目中使用a标签下载视频文件
vue项目中使用a标签下载视频文件前提条件: 1.地址为http 2.文件格式为MP4(仅代表这次项目中使用的情况) 示例代码: <el-button size="mini" ...
013_下载静态资源
一. 使用Tomcat默认的servlet去下载静态资源 1. 直接以超链接的方式下载, 不写任何代码, 就能够下载东西下来. <a href="Download/shake.wav ...
springboot中添加静态资源的方式，默认的静态资源文件夹有哪些
通过webjar的方式引入静态资源访问popular webjar网站,里面有大量的最常用的静态资源webjar,以jar包的形式导入静态资源.类如jquery.vue.bootstrap等,都可以 ...
vue中svg转png下载
vue中svg转png下载 <template><div><button @click="downloadPng">change</but ...
SpringBoot 读取项目中静态资源文件
目录一. ClassPathResource 二. DefaultResourceLoader 三. PathMatchingResourcePatternResolver 四. ResourceU ...
如何在React Native中构建项目并管理静态资源
by Khoa Pham 通过Khoa Pham 如何在React Native中构建项目并管理静态资源 (How to structure your project and manage stati ...
在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案
在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案参考文章: (1)在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案 (2)https: ...
React中Fragment标签和空标签的使用(vue中的template标签类似)
Fragment作用: 类似于vue中的template标签,将当前dom不渲染后页面.在多层循环中可以添加key属性,其他属性不可以添加.不然会警告,提示只能有key属性和children vdom ...
SpringBoot中的yaml语法及静态资源访问问题
配置文件-yaml 在spring Boot开发中推荐使用yaml来作为配置文件. 基本语法: key: value:kv之间有空格大小写敏感使用缩进表示层级关系缩进不允许使用tab,只允许空格 ...

vue中使用a标签下载静态资源文件（比如excel、pdf等）后端不参与

问题描述

步骤

总结

vue中使用a标签下载静态资源文件（比如excel、pdf等）后端不参与相关推荐

最新文章

热门文章