Vue项目中实现文件下载到本地的功能
公司业务需求,我需要实现一个合同模板,自定义输入内容后生成合同随后导出下载合同。(自定义部分用到的是)
为了实现这个文件下载到本地的功能,真的是废了九牛二虎之力,以至于差点放弃(主要还是自己菜)。刚开始自己用到的是Window.open()的方法,发现这个方法只能将你的合同在新页面打开,并不能实现下载功能;然后就换了html5 Bolb方法,弄了些许时间后发现还是不能达到自己的需求,最后在不断的挣扎中找到了FileSaver.js 首先需要安装即:npm install file-saver --save
安装后项目中引入saveAs:import {saveAs} from 'file-saver'
保存文件代码:var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"}); saveAs(file);
具体实现效果如下如所示:
在富文本编辑器中输入内容
当合同内容确定好之后点击下载
下载完成后就可以查看合同效果了
通过以上方式就可以实现此功能了,有不清楚或者其他问题可留言!!!
Vue项目中实现文件下载到本地的功能的更多相关文章
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
- vue项目中使用iconMoon图标
前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- 如何在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...
- 在webpack搭建的vue项目中如何管理好后台接口地址
在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包, ...
- vue 项目中使用阿里巴巴矢量图标库iconfont
原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...
随机推荐
- JZOJ5405 & AtCoder Grand Contest 001 F. Permutation
题目大意 给出一个长度为\(n\)的排列\(P\)与一个正整数\(k\). 你需要进行如下操作任意次, 使得排列\(P\)的字典序尽量小. 对于两个满足\(|i-j|>=k\) 且\(|P_i- ...
- SpringBoot 之 Dao层模拟数据库操作
单表操作: # src/main/java/com/wu/dao/DepartmentDao .java @Repository public class DepartmentDao { privat ...
- Servlet中分发器和重定向两兄弟
注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6513702111698485767/ 弄清这个两兄弟,我们还是从练习中去理解 先创建一个数据提交页面,注意路径 编 ...
- 图形验证插件,百度编辑器拓展功能,NodeJs消息机制以及聊天室
图形验证插件 网上找了很多图形验证插件,比较推荐verify.js <link rel="stylesheet" type="text/css" href ...
- 【C++】类-多态
类-多态 目录 类-多态 1. 基本概念 2. 运算符重载 2.1 重载为类的成员函数 2.2 重载为非成员函数 3. 虚函数 4. 抽象类 5. override与final 1. 基本概念 多态性 ...
- netty基础知识
参考 http://www.infoq.com/cn/articles/netty-high-performance 1. 传统 RPC 调用性能差的三宗罪 1)网络传输方式问题 2)序列化方式问题 ...
- 论文解读第三代GCN《 Deep Embedding for CUnsupervisedlustering Analysis》
Paper Information Titlel:<Semi-Supervised Classification with Graph Convolutional Networks>Aut ...
- golang中通过bufio和os包读取终端中输入的一行带空格的数据
1. 如果读取不带空格的数据可以使用fmt.Scan或fmt.Scanln读取一个或多个值,但是不能读取带空格的数据,可以使用bufio和os两个包结合 package main import ( & ...
- golang中channel讲解
1. 无缓冲通道 2. 有缓冲通道 有缓冲通道特点:当channel已经满,在向里面写数据就会阻塞,当channel已经为空,在从里面读数据就会阻塞. 3. 关闭channel package mai ...
- IoC容器-Bean管理(bean生命周期)
1,生命周期 即从对象创建到对象销毁的过程 2,bean生命周期 (1)通过构造器创建bean实例(无参数构造) (2)为bean的属性设置值和对其他bean的引用(调用set方法) (3)调用bea ...