vue使用a标签 download属性下载本地资源

最新推荐文章于 2024-07-23 20:33:37 发布
最新推荐文章于 2024-07-23 20:33:37 发布
阅读量1k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48205715/article/details/118806589
版权

vue

直接放代码，大概功能是能将本地的文件放置页面供其他人下载

参考模板请点击下载： <a href="/eg.xlsx" download="eg.xlsx" class="down">example.xlsx</a>
  • 将本地文件放在vue项目下的public里面，这点很重要，我之前放在了static目录下，硬是排了半天错，所以放在public目录下！！！
ebok.
关注
在Vue框架中通过a标签实现下载本地资源的功能
郭宝的博客
07-18 7438
效果图： vue-cli 2.x 在vue-cli 2.x中，需要将本地资源放在static文件夹下，文件的名称可以随意，但是必须是英文。如果后续需要修改下载文件的名称，可以通过download 这个属性来控制，在这里可以是中文。如下代码： <a href="../../../static/template.csv" download="分析模板.csv">下载文件</a> vue-cli 3.x 在vue-cli 3.x中，需要将本地资源放在public文件...
利用a标签的click方法下载APK到电脑本地
qq_37635012的博客
02-20 650
这里要注意的是不要用const定义a标签，不然控制台会报警告。
vue通过 a 标签的 download 属性结合 blob 构造函数下载excel文件
是大林的林吖-博客
09-27 407
1.vue页面视图 <el-button type="danger" icon="el-icon-download" size="medium" @click="templateDownload" >模板示例</el-button> 2.methods方法里 templateDownload() { aoiTemplateExport().then((res) => { const url = window.URL
vue 利用创建a标签实现下载功能
qq_38990668的博客
08-25 833
调用downloadUrl(‘要下载的地址’)
Vue如何让用户通过a链接点击下载一个excel文档
最新发布
ggq53219的博客
07-23 565
在Vue中，通过<a>标签让用户点击下载Excel文档，通常需要确保服务器支持直接下载该文件，并且你有一个可以直接访问该文件的URL。以下是一些步骤和示例，展示如何在Vue应用中实现这一功能。
【vue】在vue项目中通过a标签download下载本地文件
A_soulmate的博客
01-12 1258
1.将需要下载的文件放在public，也就是和index.html文件一个文件夹下即可，如下图： 然后在需要进行点击下载文件的地方添加如下代码： <a href="./需要下载的文件名" download>点击下载</a> 就可以实现下载啦。 ...
vue 项目标签 点击下载文件
weCat_s的博客
10-27 1242
看网上，很多都说放在什么static、public目录，但是没什么用，最后发现一句代码的事（引入方式），话不多说，先上代码 点击dom元素，创建一个a标签，给上download属性指定下载格式，如果是图片就png ，xsl就xsl，创建完之后，销毁。 const path = require('../../../../public/aixin.png'); console.log(path); var a = document.createElement("a"); a
vue使用a标签下载文件_vue+iview 通过a标签实现文件下载
weixin_39613208的博客
12-20 1960
vue+iview 通过a标签实现文件下载方法一：注意: 如果下载的文件放在本地目录下，一定要将模板文件放到 public 目录下，否则由于权限问题找不到文件路径： 项目更目录--》public--》tpls--》下载模板.xls1.1 直接使用a标签 + download属性下载{{ downTplNm }}模板1.2 定义文件下载地址和文件名methods: {type2Obj: functi...
vue 使用 html2canvas 截屏并下载图片至本地（重点兼容ie浏览器）
05-06
这段代码会截取整个页面，生成一个数据URL，然后创建一个隐藏的`<a>`标签，设置其`download`属性为文件名，`href`属性为数据URL。点击这个链接，浏览器就会开始下载图片。 然而，IE浏览器不支持`toDataURL`方法，...
vue3 如何通过a标签下载静态资源中的zip文件
05-30
在Vue3中，你可以使用`<a>`标签来下载位于静态资源中的zip文件。以下是一个基本的代码示例： ```vue <a :href="zipUrl" download="example.zip">Download Zip</a> export default { data() { return { ...
vue3中如何通过a标签下载静态资源中的zip文件
05-30
在Vue3中，你可以使用`<a>`标签来下载位于静态资源中的zip文件。以下是一个基本的代码示例： ```vue <a :href="zipUrl" download="example.zip">Download Zip</a> export default { data() { return { ...
vue添加class样式实例讲解
01-19
vue提供了一个动态添加class的v-bind:class（:class） 对象，可以使用：class进行clas动态的切换。案例中将通过使用:class设置 字体为红色。 1、新建一个html代码页面。 2、在html代码页面创建一个同时添加id为app，并添加一段文本 3、引入vue.js文件。使用标签引入vue文件。 4、创建vue实例。新建一个[removed]标签，然后使用new Vue()创建实例。 代码： [removed] var app = new Vue({ el:#app }) [removed]   5、创建设置字体为红色的red
Vue 通过a标签下载文件
weixin_46007066的博客
10-10 5573
vue前端点击某个a便签需要下载对应文件，href为下载路径，download为下载文件名 这是Vue-cli3 写法 因为public文件夹是静态拷贝。 并不要把文件放到src>assets里面 因为assets中的文件会经过 webpack 打包，重新编译。 <a href="./public/static/file/下载一个文件.docx" download="我是阿超.docx">下载文件</a> vue-cli3 文件目录 而 vue-cli2 需要下载的文
vue 下载文件
毛茸茸的枫哥
03-20 1250
<templete> <span @click="download(contract.filePath)">下载</span> </templete> <script> module.exports = { methods: { download(filePath){ var self = this; ...
vue 文件流导出下载
晓风揽月
11-22 863
业务场景：点击下载按钮，请求接口后，js下载接口返回的文件流，并且兼容ie、firefox、chrome 关于文件名：我司后端将文件名放在请求头headers里，需要代码获取 请求响应消息Response 控制台打印结果： 文件流 下载完成 实现代码： /** * 文件流下载 * data:接口返回文件流 * fileName:文件名 ...
vue实现文件下载功能
热门推荐
RequesToGod的博客
12-24 1万+
对于Vue中实现一般的下载功能很简单，一般为了方便，在项目文件的api.js配置文件中添加一个下载方法即可，这里以以下download方法为例。将download这部分方法添加到api.js文件中即可。 api.js配置 export default { // 下载关键代码 download(url, params) { return new Promise((resolve, reject) => { axios({ // 和后端协商好下载方法po
Vue学习-如何在vue项目中通过a标签 download 下载本地文件
qq_43762607的博客
05-23 3300
如何在vue项目中通过a标签 download 下载本地文件？ 一般来说我们会将vue项目的静态资源放在src的assets目录下。但如果我们将需要下载的，例如doc文件放在同样的目录下就会出现下载失败，找不到目标文件的错误。 其实只需要将需要下载的文件放在public，也就是和index.html文件一个文件夹下即可，如下图： 然后在需要进行点击下载文件的地方添加如下代码： <a href="./需要下载的文件名" download>点击下载</a> 就可以实现下载啦。 ..
a标签实现下载本地文件的功能
qq_40055200的博客
04-16 3253
<a :href="detail.ctaFile" target="_blank" v-if="detail.ctaFile">点击下载</a> target=“_blank”是打开新的页面 :href链接的目标
vue js 模拟a标签点击下载监听进度条下载进度
suimengfeiyang123的博客
06-20 582
vue 点击下载请求静态资源，如何监听进度条下载的进度，实现loading
vue 如何使用a标签herf属性下载文档
06-08
要使用a标签的href属性下载文档，你可以这样做： 1. 在vue模板中创建一个a标签，设置它的href属性为文件的下载链接，例如： ```html <a :href="downloadLink">下载文档</a> ``` 2. 在Vue实例中定义一个download...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值