Vue:a标签点击和file-saver实现文件下载
目录
- 方式一:a标签点击实现
- 方式二:file-saver实现保存
方式一:a标签点击实现
<template><div class=""><el-buttonsize="small"@click="downloadFile">保存文件</el-button></div>
</template><script>
export default {methods: {downloadFile() {var blob = new Blob(['Hello, world!'], {type: 'text/plain;charset=utf-8',});// 存在浏览器兼容性let href = URL.createObjectURL(blob);let alink = document.createElement('a');alink.style.display = 'none';alink.download = '文件名.txt'; //下载后文件名alink.href = href;document.body.appendChild(alink);alink.click();document.body.removeChild(alink); //下载完成移除元素URL.revokeObjectURL(href); //释放掉blob对象},},
};
</script><style lang="scss" scoped>
</style>
方式二:file-saver实现保存
文档:
- https://www.npmjs.com/package/file-saver
- https://github.com/eligrey/FileSaver.js/
cdn: https://www.jsdelivr.com/package/npm/file-saver
依赖
npm i file-saver
语法
FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })
示例
// 保存txt
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");// 保存url
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");
Vue.js示例
<template><div class=""><el-buttonsize="small"@click="saveFile">保存文件</el-button></div>
</template><script>
/*** 文件保存*/
import FileSaver from 'file-saver';export default {methods: {saveFile() {var blob = new Blob(['Hello, world!'], {type: 'text/plain;charset=utf-8',});FileSaver.saveAs(blob, '文件名.txt');},},
};
</script><style lang="scss" scoped>
</style>
CDN方式引入
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script><script>
// 直接使用 FileSaver.saveAs
saveAs(url)
</script>
测试发现:
下载方式 | 打开下载对话框 | 行为 |
---|---|---|
a标签 | 当前窗口 | 触发浏览器下载 |
file-saver | 新窗口 | 先下载,再保存 |
Vue:a标签点击和file-saver实现文件下载相关推荐
- a标签 vue 动态点击_vue a标签点击实现赋值方式
如下所示: v-for="kf in kefu" function copy_fun(copy){ //参数copy是要复制的文本内容 上面的方法就可用了,亲测可用! 补充知识:v ...
- a标签 vue 动态点击_vue实现a标签点击高亮方法
下面我就为大家分享一篇vue实现a标签点击高亮方法,具有很好的参考价值,希望对大家有所帮助. 如下所示: lang="en"> charset="UTF-8&quo ...
- 移动端Vue项目a标签点击事件无效
移动端Vue项目a标签点击事件无效 近期项目出现了部分机型点击无效的现象,后来定位到原来是a标签的问题,将a标签更换为div标签,加宽加高点击范围,就可以解决这个问题. // a标签点击事件不生效 & ...
- vue中a标签点击事件效果不理想
如果你发现在vue项目中给a标签加点击事件,然后在methods的事件处理函数中程序达不到预期的效果,比如该出的弹窗没有出来,考虑给点击事件加个prevent修饰符试试.prevent修饰符,本质上是 ...
- vue中el-radio-group点击事件,双击取消
vue中el-radio-group点击事件 普通用法 需要实现双击取消 普通用法 需要注意,如果@change事件除了当前选中的单选按钮的label值,还需要带上另外的参数,则需要用event来代替 ...
- vue实现标签云,让你的标签动起来
欢迎大家进群,一起探讨学习 微信公众号,每天给大家提供技术干货 博主技术笔记 博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star vue实现标签云,让你的 ...
- 【js】a标签点击下载
处理问题: 兼容不同浏览器的a标签点击下载 export const downLoadFile = ({url,fileName,downType, }: {url: stringfileName: ...
- ** Vue下js点击按钮元素左右滚动效果 **
** Vue下js点击按钮元素左右滚动效果 ** 小程序.前端交流群:609690978 先上效果图 代码: <div id="classifyScroll" :class= ...
- Vue里标签嵌套限制问题解决------解析DOM模板时注意事项:
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: 参考文章: (1)Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: (2)https://www.cnblogs. ...
最新文章
- 轻松掌握nodeJS之npm
- 更改SQL Server表所有者的操作方法
- SpringBoot+Shiro学习(一):主要模块介绍
- SpringBoot2.0基础案例(01):环境搭建和RestFul风格接口
- python实现文字转语音的合成
- 字符串、文件操作,英文词率统计预处理
- [Ajax] jQuery中的Ajax -- 02-jQuery中的三级联动
- UI设计配色专辑素材|简易完成色彩协调性!
- ResourceUtils读取properties文件
- MPMoviePlayerController 电影播放器—IOS开发
- chromium目录下各个dll的作用
- Flutter上线项目实战——环信客服插件
- [凯圣王]减脂挑战第15天变化/饮食思路分享/碳水循环+轻断食/GI值和GL值的应用/碳水后置的理论基础
- Hoeffding's lemma证明
- AI一分钟 | 大福利!谷歌2018年将公开内部机器学习培训课程;医疗影像领域今年最大融资出炉!图玛深维获软银中国2亿人民币投资
- 微信公众号里打开链接下载APP
- 生信(八)zlib库操作fq-gz文件
- 微信小程序的常见的面试题(总结)
- what-is-downasaur
- 使用springBoot:run命令启动时报错:An exception occurred while running. null