Vue+elementUI 导出word打印

这篇具有很好参考价值的文章主要介绍了Vue+elementUI 导出word打印。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

import JSZipUtils from "jszip-utils";
import JSZip from "pizzip";
import Docxtemplater from "docxtemplater";

npm安装以上依赖

首先维护个word模板

Vue+elementUI 导出word打印,VUE+elementUI,vue.js,elementui,前端

导出方法文章来源地址https://www.toymoban.com/news/detail-696230.html

    //导出word
    skipOutWord(row) {
      var printData = row
      const data = JSON.parse(JSON.stringify(printData))
      data.timeYear = data.startTime.toString().split("-")[0]
      data.startTime = data.startTime.toString().split("-")[0]+'年'+data.startTime.toString().split("-")[1]+'月'
      data.endTime = data.endTime.toString().split("-")[0]+'年'+data.endTime.toString().split("-")[1]+'月'

      //set打印日期
      JSZipUtils.getBinaryContent('/template/projectApplication.docx', function (error, content) {
        // 抛出异常
        if (error) {
          throw error
        }
        // 创建一个JSZip实例,内容为模板的内容
        const zip = new JSZip(content)
        // 创建并加载docxtemplater实例对象
        const doc = new Docxtemplater().loadZip(zip)
        // 设置模板变量的值
        doc.setData({
          ...data,
        })
        try {
          // 用模板变量的值替换所有模板变量
          doc.render()
        } catch (error) {
          // 抛出异常
          // let e = {
          //   message: error.message,
          //   name: error.name,
          //   stack: error.stack,
          //   properties: error.properties,
          // }
          this.$message.error('导出失败')
          throw error
        }

        // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        })
        // 将目标文件对象保存为目标类型的文件,并命名
        saveAs(out, '汕头公司'+printData.startTime.toString().split('-')[0] + '年职工(青年)创新创效立项申报表.docx')
      })
    },

到了这里,关于Vue+elementUI 导出word打印的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端小工具Vue+ElementUI+Clipboard :快捷复制

    我们在日常经常会遇到这种功能(特别多见于C端): 手机上操作不变,想要粘贴个信息比较麻烦,就会出现【点一点复制】 查看敏感信息一般就直接提示【已成功复制粘贴板】 对于网页上一长串显示的文字或者输入的文字,全部选中很长又很麻烦,这时候就提供\\\"快捷复制\\\"的

    2024年02月06日
    浏览(35)
  • GuLi商城-前端基础Vue-整合ElementUI快速开发

    npm安装 启动项目:npm run dev http://localhost:8082/#/hello 

    2024年02月09日
    浏览(45)
  • Vue + ElementUI 实现后台管理系统模板 -- 前端篇

    使用场景分析: Home.vue 页面中,Header 部分有个折叠按钮,点击之后,可以折叠与展开 Aside 组件,这之间就设计到数据在组件间的共享。 使用 vuex 后,数据统一管理,当数据发生变化时,其所有引用的地方均会修改。 2、安装、模块化使用 vuex 1》安装 项目构建时,已经安装

    2024年04月11日
    浏览(40)
  • 使用vue脚手架搭建前端工程(附:搭配ElementUI来快速开发)

    目录 一、搭建过程 1. 全局安装webpack(打包工具) 2. 全局安装vue脚手架 3. 初始化vue项目 4. vue项目目录的简单介绍 二、执行流程分析 三、自己造一个组件案例 四、ElementUI的使用 1. 环境的引入 2. 一个简单使用 3. 使用它来快速搭建后台管理系统 五、总结 npm install webpack -g np

    2024年02月10日
    浏览(68)
  • Vue中前端导出word文件

    很多时候在工作中会碰到完全由前端导出word文件的需求,因此特地记录一下比较常用的几种方式。 一、提供一个word模板 该方法提供一个word模板文件,数据通过参数替换的方式传入word文件中,灵活性较差,适用于简单的文件导出。需要依赖: docxtemplater、file-saver、jszip-uti

    2024年02月05日
    浏览(41)
  • 记录--Vue中前端导出word文件

    很多时候在工作中会碰到完全由前端导出word文件的需求,因此特地记录一下比较常用的几种方式。 该方法提供一个word模板文件,数据通过参数替换的方式传入word文件中,灵活性较差,适用于简单的文件导出。需要依赖: docxtemplater、file-saver、jszip-utils、pizzip 。   调用down

    2024年02月08日
    浏览(33)
  • Vue前端实现excel的导入、导出、打印功能

    导入导出依赖: npm install xlsx@0.16.9 npm install xlsx-style@0.8.13 --save 安装xlsx-style,运行报错 This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js 解决报错 在node_modulesxlsx-styledistcpexcel.js 807行 的 var cpt = require(\\\'./cpt\\\' + \\\'able\\\'); 改为: var cpt = cptable; 打印

    2023年04月08日
    浏览(46)
  • vue前端实现导出页面为word(两种方法)

    注意:在当前页面引入依赖 注意:如果导出的时候出现bug,大多是因为文件路径引入有问题,再次排查路径引入

    2024年04月25日
    浏览(40)
  • vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table

    可以全部复制粘贴,也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 html部分: js部分:

    2024年02月04日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包