Vue+elementUI导出word打印方式

 更新时间:2025年04月09日 16:30:53   作者:沉默是金~  
这篇文章主要介绍了Vue+elementUI导出word打印方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue+elementUI导出word打印

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

npm安装以上依赖

首先维护个word模板

导出方法

    //导出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')
      })
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue2.0 实现导航守卫的具体用法(路由守卫)

    vue2.0 实现导航守卫的具体用法(路由守卫)

    这篇文章主要介绍了vue2.0 实现导航守卫的具体用法(路由守卫),vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • 前端XSS攻击场景详解与Vue.js处理XSS的方法(vue-xss)

    前端XSS攻击场景详解与Vue.js处理XSS的方法(vue-xss)

    这篇文章主要给大家介绍了关于前端XSS攻击场景与Vue.js使用vue-xss处理XSS的方法,介绍了实际工作中渲染数据时遇到XSS攻击时的防范措施,以及解决方案,需要的朋友可以参考下
    2024-02-02
  • vue中引入路径@的用法及说明

    vue中引入路径@的用法及说明

    这篇文章主要介绍了vue中引入路径@的用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue页面锁屏的完美解决方法记录

    vue页面锁屏的完美解决方法记录

    锁屏是指用户暂时离开时点击锁屏,用户无法跳转到其他页面,回来输入密码点击解锁,下面这篇文章主要给大家介绍了关于vue页面锁屏的完美解决方法,需要的朋友可以参考下
    2022-06-06
  • vue按住shift键多选方式(以element框架的table为例)

    vue按住shift键多选方式(以element框架的table为例)

    这篇文章主要介绍了vue按住shift键多选方式(以element框架的table为例),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 公共组件父子依赖调用及子校验父条件问题解决

    公共组件父子依赖调用及子校验父条件问题解决

    这篇文章主要介绍了如何解决公共组件父子组件依赖调用和子组件校验父组件条件的问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • Vue3如何使用axios发起网络请求

    Vue3如何使用axios发起网络请求

    这篇文章主要介绍了Vue3如何使用axios发起网络请求,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue子传父关于.sync与$emit的实现

    vue子传父关于.sync与$emit的实现

    这篇文章主要介绍了vue子传父关于.sync与$emit的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • springboot + vue+elementUI实现图片上传功能

    springboot + vue+elementUI实现图片上传功能

    文章描述了如何使用Element UI的el-upload组件实现前端图片上传,并将图片存储到后端数据库,同时在页面上回显上传的图片,后端通过接口接收图片,并将其存储在指定位置,然后返回图片路径以便在前端显示,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2025-01-01
  • vue @input和@click的区别及说明

    vue @input和@click的区别及说明

    这篇文章主要介绍了vue @input和@click的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论