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

为了实现这个文件下载到本地的功能,真的是废了九牛二虎之力,以至于差点放弃(主要还是自己菜)。刚开始自己用到的是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. 数据库SQL语言类型(DQL.DML.DDL.DCL)

    1.SQL语言 SQL(Structure Query Language)语言是数据库的核心语言. SQL是一个标准的数据库语言, 是面向集合的描述性非过程化语言. 它功能强,效率高,简单易学易维护. ...

  2. Log4j2完整XML参考(详细注释说明)

    1.说明 本文提供完整的log4j2.xml配置文件, 供开发中参考使用,可以作为模板, 配置对应实现如下常用的功能: 1.自动检测和重新加载配置,每10分钟(600s)检测一次 2.每个日志文件最大 ...

  3. ARP解析MAC地址的全过程(ARP的工作机制)

    以太网环境下,同一个网段的主机之间需要互相知道对方的MAC地址,才能访问. TCP/IP协议栈从上层到下层的封装过程中,第三层封装需要知道目的IP,第二层封装需要知道目的MAC. 目的IP一般由用户手 ...

  4. spring cloud Zuul 多层拦截 --- 心得

    1.前言 根据教材.博客文章的实例实操,基本都是单层拦截,没有找到多层拦截的具体写法 ,让我走了很多弯路,我将其写在这里,以待以后参考. 2.环境 spring boot : 2.1.6.RELEAS ...

  5. nvm切换node版本出现乱码 exit status 1:

    nvm切换nodejs版本出现exit status 1:乱码 跟着网上的教程一步一步做,还是出现问题.浪费一下午的时间 最后发现却因为我没用CMD管理员权限运行 扑街 解决方法: 用管理员身份运行就 ...

  6. 第10组 Alpha冲刺 (6/6)(组长)

    1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14008187.html ·作业博客:https://edu.cnblogs.co ...

  7. 服务性能监控系列之Metrics

    Metrics是一个提供服务性能检测工具的Java类库,它提供了功能强大的性能指标工具库用于度量生产环境中的各关键组件性能. 度量类型 Metrics提供了以下几种基本的度量类型: Gauge:用于提 ...

  8. 使用redis+lua实现SQL中的select intersect的效果

    公众号文章地址 1.需求 业务中需要实现在两个集合中搜索数据,并返回交集. 用SQL的伪代码可以描述如下: select key from set1 where sorted_key between ...

  9. gin框架中的中间件

    全局中间件 所有请求都经过此中间件 中间件中设置值 func MiddleWare() gin.HandlerFunc { return func(context *gin.Context) { t ...

  10. CentOS7搭建Docker私有仓库----Docker

    有时候使用Docker Hub这样的公共仓库可能不方便,这种情况下用户可以使用registry创建一个本地仓库供私人使用,这点跟Maven的管理类似.目前Docker Registry已经升级到了v2 ...