公司业务需求,我需要实现一个合同模板,自定义输入内容后生成合同随后导出下载合同。(自定义部分用到的是)

为了实现这个文件下载到本地的功能,真的是废了九牛二虎之力,以至于差点放弃(主要还是自己菜)。刚开始自己用到的是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项目中实现文件下载到本地的功能的更多相关文章

  1. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  2. 在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  3. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  4. Vue项目中使用vw实现移动端适配

    我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...

  5. vue项目中使用iconMoon图标

    前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...

  6. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  7. 如何在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

  8. 在webpack搭建的vue项目中如何管理好后台接口地址

    在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包, ...

  9. vue 项目中使用阿里巴巴矢量图标库iconfont

    原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...

随机推荐

  1. PostgresSQL客户端pgAdmin4使用

    1.说明 pgAdmin 4是一款为PostgreSQL设计的可靠和全面的数据库设计和管理软件, 它允许您连接到特定的数据库,创建表和运行各种从简单到复杂的SQL语句. 它支持的操作系统包括Linux ...

  2. 初识MASA Blazor

    MASA Blazor是一个Blazor的UI组件库.就像大家写前端熟知的Bootstrap, Ant Design一样. MASA Blazor官网地址:https://blazor.masasta ...

  3. window10 查看端口列表 - 查看占用的进程-销毁该进程

    cmd进入指令框后 查看端口列表 netstat -ano 查看占用的进程 [6666是端口号对应的进程数] tasklist|findstr "6666" 销毁该进程 [6666 ...

  4. jenkins启动失败 jenkins.service failed Starting Jenkins bash: /usr/bin/java: 没有那个文件或目录

    失败的原因 ● jenkins.service - LSB: Jenkins Automation Server Loaded: loaded (/etc/rc.d/init.d/jenkins; b ...

  5. 浅谈xss漏洞

    0x00 xss漏洞简介 XSS漏洞是Web应用程序中最常见的漏洞之一.如果您的站点没有预防XSS漏洞的固定方法, 那么很可能就存在XSS漏洞. 跨站脚本攻击是指恶意攻击者往Web页面里插入恶意Scr ...

  6. SpringBoot2.4.2下配置Lettuce使用Redis

    1. Springboot2.4.2下对Redis的基础集成 1.1 maven添加依赖 <dependency> <groupId>org.springframework.b ...

  7. Unity3D开发入门教程(三)——添加启动脚本

    五邑隐侠,本名关健昌,12年游戏生涯. 本教程以 Unity 3D + VS Code + C# + tolua 为例. 一.启动脚本 第一篇 "搭建开发环境",在 "配 ...

  8. 【PTA】字符串正反序连接

    将s所指字符串的正序和反序进行连接,形成一个新串放在t所指的数组中. 函数接口定义: void fun (char *s, char *t); 其中s 和t都是用户传入的参数.函数将s所指字符串的正序 ...

  9. 网络编程-TCP连接的建立与终止

    TCP是一个面向连接的协议.无论哪一方向另一方发送数据之前,都必须先在双方之间建立一条连接. 1.建立连接 请求端(通常称为客户)发送一个 SYN 段指明客户打算连接的服务器的端口,以及初始序号( I ...

  10. 遇到奇怪的问题:web.py 0.40中使用web.input(),出现一堆奇怪的错误

    有的请求很正常,有的请求就出现了500错误. 这里使用POST请求,然后在web.input()中出现了很长很长的错误. 猜测是这个机器上安装了python2.7 / python 3.6 / pyt ...