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

为了实现这个文件下载到本地的功能,真的是废了九牛二虎之力,以至于差点放弃(主要还是自己菜)。刚开始自己用到的是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. Linux常用命令,新手可以看看

    最近在温习了一些linux的命令,这里总结一下,博主使用的系统是Ubuntu,版本如下: 由于博主是做开发的,所有linux只会一些常用的命令,跟那些专业linux大牛当前没的比,为什么Ubuntu而 ...

  2. python selenium + web自动化,切换到新的窗口,元素定位不到?

    问题描述: 自动化由首页切换到分页面,打开了一个新的窗口,不过,定位不到这个窗口的元素,通过开发者工具是可以查到这个元素的 原因是: 因为窗口句柄还停留在上一个页面,所以导致无法定位元素.报错 &qu ...

  3. 在 CentOS 7 上安装 GitLab

    1. 安装和配置必要的依赖库 sudo yum install -y curl policycoreutils-python openssh-server # the commands below w ...

  4. set类型转string[] 正确写法

    测试源码: 1 @org.junit.Test 2 public void testSetType(){ 3 //测试set类型转string[] 4 // 5 Set<String> s ...

  5. centos7 修改网卡信息

    修改网卡配置文件 vim /etc/sysconfig/network-scripts/ifcfg-eth0 有一些不是eth0 也可能是ens33 修改完成后使用下面命令进行重启 systemctl ...

  6. Keil MDK STM32系列(五) 使用STM32CubeMX创建项目基础结构

    Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...

  7. 【Java常用类】System

    System System类代表系统,系统级的很多属性和控制方法都放置在该类的内部. 该类位于java.lang包.由于该类的构造器是private的,所以无法创建该类的对象,其内部的成员变量和成员方 ...

  8. 单篇长文TestNG从入门到精通

    简介 TestNG是Test Next Generation的缩写,它的灵感来自于JUnit和NUnit,在它们基础上增加了很多很牛的功能,比如说: 注解. 多线程,比如所有方法都在各自线程中,一个测 ...

  9. 你管这叫代理模式(Proxy Pattern)

    代理模式   代理模式即给一个真实类提供一个代理类,该代理类代替真实类完成其功能,一般还可在代理类上添加一些真实类不具有的附加功能,通俗来讲代理模式就是我们生活中常见的中介,代理模式又可分为静态代理和 ...

  10. [SWPUCTF 2018]SimplePHP

    [SWPUCTF 2018]SimplePHP 知识点 1.PHP反序列化入门之phar 2.反序列化魔术方法 __construct()//当一个对象创建时被调用 __destruct() //当一 ...