vue通过a标签本地下载Excel模板

最新推荐文章于 2024-02-19 10:56:33 发布
最新推荐文章于 2024-02-19 10:56:33 发布
阅读量1.9k 收藏 2
点赞数 1
分类专栏： js vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JSN___/article/details/121898225
版权
js 同时被 2 个专栏收录
75 篇文章 0 订阅
订阅专栏
vue
49 篇文章 0 订阅
订阅专栏

前端标题vue通过a标签本地下载Excel模板

前期准备 我们需要准备你需要的Excel模板下载下来，然后找vue项目里放静态文件的地方，注意的是你的模板名称要和a标签的里的保持一致
在这里插入图片描述

<a class="loadMould" :href="handleDownload('/document/导入模板.xlsx')" download="导入模板.xls">下载导入模板</a>

 /**下载导入模板 */
 methods:{
 	   handleDownload (url) {
      return 'http://' + window.location.host + url
    },
 }
JSN___不像码农的码农
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue a标签点击实现赋值方式
12-28
如下所示： v-for=“kf in kefu” function copy_fun(copy){ //参数copy是要复制的文本内容 上面的方法就可用了，亲测可用！ 补充知识：VUE 给类似a标签加点击事件不跳转的问题 VUE的@click事件修饰符 运用： .prevent 阻止默认行为 <a>点击</a> .stop 阻止冒泡，只执行 start 不执行 end <div id=app click=end> <input type=button
vue中使用a标签下载静态资源文件（比如excel、pdf等）后端不参与
麦叔
05-28 8597
问题描述 平常我们在项目中需要做下载文件的功能，比如下载excel表格、比如下载pdf文件、比如下载word文档，这样的功能，一般是后端做，即：后端返回一个流文件、或者返回一个url地址… 但是，实际上，前端也是可以做的。很简单，使用a标签的下载功能即可。不过要注意静态文件存放的位置。 注意，前端做静态资源的下载适合固定的数据，不和数据库交互的数据，比如excel模板、比如注意事项.docx文档什么的。反之，后端做会更加合适。 步骤 第一步，public文件夹下新建static文件夹存放静态资源 在我们做v
【前端】Vue中引入excel模板并下载以及XLSX封装使用
最新发布
lcukyNwa的博客
02-19 1074
我使用XLSX的场景，在我上传excel的时候，我需要获取它的表头以及里面的数据进行渲染到表格中，在我编辑的时候需要请求Excel的地址，将返回流转JSON也拿里面的表格数据。新增配置，在vue.config.js中，自己比较一下，最后一段新增的chainWebpack。src/assets/excelTemplate/模板.xls。即可将模板下载到本地。
vue中a标签实现带header的下载excel文件
一火的专栏
04-10 2428
import Cookie from 'js-cookie' 界面： <a-button slot="extra" type="primary" @click="exportFile" ><a-icon type="download" />导出</a-button> js方法 exportFile() { fetch('http://.
vue中下载excel文件4种方法
热门推荐
一火的专栏
04-10 2万+
目录 1、通过url下载 2、通过 a 标签 download 属性结合 blob 构造函数下载 3、通过 js-file-download 插件 4、使用fetch下载 1、通过url下载 即后端提供文件的地址，直接使用浏览器去下载 通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(ur.
使用a标签，点击自动下载文件（Excel），不做页面跳转
qq_61049292的博客
11-16 9576
记录下最近项目中遇到的问题 知识点： 编码：防止乱码 escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z encodeURI() 函数可把字符串作为 URI 进行编码，字符将被十六进制的转义
a标签下载pdf、excel、图片等文件
zezejingi的博客
06-09 2076
1、a标签中添加download属性，但是这个方法有时候会失效，这是因为download不支持跨域请求，网站和pdf文件必须在同一域名下才可行，不然就是先打开一个新标签预览。2、在pdf文件下载链接后加response-content-type=application/octet-stream，在浏览器中打开pdf文件链接时，浏览器会默认进行下载。3、动态创建a标签进行下载。
Vue实现 下载本地Excel文件
RayLyu0829的博客
01-05 1952
vue下载本地excel文件
a标签下载文件，js/jq创建a标签导出Excel文件
梁小桐
04-08 2317
a标签下载文件 【html】 <button type="button" class="layui-btn layui-btn-sm" id="formExport">导出</button> 【script】 $('#formExport').on('click',function(event){ event.preventDefault(); let exampleNum = []; let isChecked ..
a标签导出excel文件
dongakng的博客
02-06 666
a标签导出excel文件
vue读取本地的excel文件并显示在网页上方法示例
10-16
主要介绍了vue读取本地的excel文件并显示在网页上方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue下载excel的实现代码后台用post方法
10-17
主要介绍了vue下载excel的实现代码,后台用post方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue 中 a标签上href无法跳转的解决方式
01-19
使用vue-router 在IE下 a标签里的路由不跳转，火狐，chrome工作正常。 解决： 在App.vue 里增加判断IE浏览器手动修复…… export default { name: 'App', mounted(){ function checkIE(){ return '-ms-scroll-...
vue.js 实现a标签href里添加参数
10-16
今天小编就为大家分享一篇vue.js 实现a标签href里添加参数，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
git的冲突解决--git rebase之abort、continue、skip
JSN___的博客
12-09 1万+
git的冲突解决–git rebase之abort、continue、skip （1）应用实例描述 假设在github或者gitoschina上建立了一个项目，默认分支为master分支，远程master分支上c.sh文件内容： 开发者A、B分别将项目拷贝到自己本地进行开发 某一天，开发者B提交c.sh，并且提交成功， 之后，开发者A在本地代码并没有和远程master分支的代码同步的情况下，对本地的c.sh进行了修改，修改后c.sh内容如下： 修改后，开发者A准备将代码提交到远程master分支上。
vue中v-for中key值的作用
JSN___的博客
07-15 6147
vue中v-for中key值的作用 其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。 要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。 我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。 vue和react的虚拟DOM的Diff算法大致相...
在JS数组特定索引处指定位置插入元素的技巧
JSN___的博客
11-18 4522
在JS数组特定索引处指定位置插入元素的技巧 需求: 将一个元素插入到现有数组的特定索引处。听起来很容易和常见,但需要一点时间来研究它。 // 原来的数组 var array = ["one", "two", "four"]; // splice(position, numberOfItemsToRemove, item) // 拼接函数(索引位置, 要删除元素的数量, 元素) array.splice(2, 0, "three"); // array; // 现在数组是这个样子 ["one", "two"
vue监听Esc事件
JSN___的博客
06-02 3668
vue监听Esc事件 **需求：监听Esc事件退出全屏，使用 document.addEventListener ** 在mounted中定义如下代码： mounted() { //监听键盘按键事件 let self = this; this.$nextTick(function () { document.addEventListener('keyup', function (e) { //此处填写你的业务逻辑即可 if (e.keyCode == 27) { self.cl
vue el-table表格内行内编辑input、日期组件等
JSN___的博客
01-11 3378
table表格内行内编辑input、日期组件等 <template> <!-- table表格内行内编辑input、日期组件等 --> <div id="app"> <!-- @cell-dblclick="tableDbEdit" 当单元格被双击击时会触发tableDbEdit事件，将文字变成input输入框,也可以使用单击事件@cell-click=''--> <el-table ref="table"
vue利用a标签的setAttribute下载excel文件
04-01
可以使用以下代码： ```vue <template> <div> <a href="#" @click="downloadExcel">Download Excel</a> </div> </template> <script> export default { methods: { downloadExcel() { const blob = new Blob(['Excel file content'], { type: 'application/vnd.ms-excel' }); const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.setAttribute('href', url); link.setAttribute('download', 'example.xlsx'); link.click(); }, }, }; </script> ``` 在`downloadExcel`方法中，我们首先创建一个Blob对象，其中包含要下载的Excel文件的内容和MIME类型。然后使用`window.URL.createObjectURL()`方法生成一个URL，将其设置为a标签的href属性。最后，将a标签的download属性设置为要下载的文件名，并调用`click()`方法以触发下载。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值