脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue导出word的实现

vue导出word纯前端的实现方式

 更新时间：2022年04月19日 09:57:38   作者：Yàο耀耀  
这篇文章主要介绍了vue导出word纯前端的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue导出word纯前端实现

最近项目有个需求导出word，纯前端实现，查了查资料，用docxtemplater简直不要太简单。

直接把官网例子拿过来就可以了。！！！

官网地址

首先，新建一个docx文件，把模板先写好。

注意！！如果数据结构中存在数组。 用{#xxx}{/xxx} 包裹。

数据结构示例：

 wordData: {
          name: '导出word',
          nameList: [{
              name: "张三",
              age: 16,
              hobby: ['吃饭', '睡觉', '打豆豆']
            },
            {
              name: "李四",
              age: 19,
              hobby: ['抽烟', '喝酒', '打麻将']
            },
          ]
        },

模板写好之后放入项目中。

然后导入需要的包，

npm i docxtemplater pizzip  file-saver  --save

然后在需要的模块内引入

  import 'docxtemplater/build/docxtemplater.js'
  import 'pizzip/dist/pizzip.js'
  import 'pizzip/dist/pizzip-utils.js'
  import 'file-saver'

  methods: {
      // 导出word
      loadFile(url, callback) {
        PizZipUtils.getBinaryContent(url, callback);
      },
      generate() {
        var that = this;
        this.loadFile("../../static/word.docx", function (error, content) {
          if (error) {
            throw error
          };
          var zip = new PizZip(content);
          var doc = new window.docxtemplater().loadZip(zip)
          doc.setData({
            ...that.wordData
          });
          try {
            // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
            doc.render()
          } catch (error) {
            var e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties,
            }
            console.log(JSON.stringify({
              error: e
            }));
            // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).
            throw error;
          }
          var out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          }) //Output the document using Data-URI
          saveAs(out, "output.docx")
        })
      },
    }

到此就完事了。

完整代码，安装完包之后直接运行就好。记得放入word模板！！！

<template>
  <div>
    <button @click="generate">导出</button>
  </div>
</template>
<script>
  import 'docxtemplater/build/docxtemplater.js'
  import 'pizzip/dist/pizzip.js'
  import 'pizzip/dist/pizzip-utils.js'
  import 'file-saver'
  export default {
    data() {
      return {
        wordData: {
          name: '导出word',
          nameList: [{
              name: "张三",
              age: 16,
              hobby: ['吃饭', '睡觉', '打豆豆']
            },
            {
              name: "李四",
              age: 19,
              hobby: ['抽烟', '喝酒', '打麻将']
            },
          ]
        },
      }
    },
    methods: {
      // 导出word
      loadFile(url, callback) {
        PizZipUtils.getBinaryContent(url, callback);
      },
      generate() {
        var that = this;
        this.loadFile("../../static/word.docx", function (error, content) {
          if (error) {
            throw error
          };
          var zip = new PizZip(content);
          var doc = new window.docxtemplater().loadZip(zip)
          doc.setData({
            ...that.wordData
          });
          try {
            // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
            doc.render()
          } catch (error) {
            var e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties,
            }
            console.log(JSON.stringify({
              error: e
            }));
            // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).
            throw error;
          }
          var out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          }) //Output the document using Data-URI
          saveAs(out, "output.docx")
        })
      },
    }
  }
</script>
<style scoped>
</style>

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

您可能感兴趣的文章:

相关文章

  • Vue Router应用方法详解

    Vue Router应用方法详解

    在看这篇文章的几点要求：需要你先知道Vue-Router是个什么东西，用来解决什么问题，以及它的基本使用。如果你还不懂的话，建议上官网了解下Vue-Router的基本使用后再回来看这篇文章
    2022-09-09
  • el-table点击某一行高亮并显示小圆点的实现代码

    el-table点击某一行高亮并显示小圆点的实现代码

    这篇文章主要介绍了el-table点击某一行高亮并显示小圆点，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • vue3使用深度选择器修改样式问题

    vue3使用深度选择器修改样式问题

    这篇文章主要介绍了vue3使用深度选择器修改样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue中封装echarts公共组件过程

    vue中封装echarts公共组件过程

    这篇文章主要介绍了vue中封装echarts公共组件过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • VUE实现日历组件功能

    VUE实现日历组件功能

    本篇文章主要介绍了VUE实现日历组件功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 浅谈Vue.use到底是什么鬼

    浅谈Vue.use到底是什么鬼

    这篇文章主要介绍了浅谈Vue.use到底是什么鬼，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 详解Vue3中侦听器watch的使用教程

    详解Vue3中侦听器watch的使用教程

    学过 vue2 的小伙伴们肯定学习过侦听器，主要是用来监听页面数据或者是路由的变化，来执行相应的操作，在 vue3里面呢，也有侦听器的用法，功能基本一样,本文就来为大家详细讲讲
    2022-07-07
  • 如何解决Element UI el-dialog打开一次后无法再次打开问题

    如何解决Element UI el-dialog打开一次后无法再次打开问题

    这篇文章主要介绍了如何解决Element UI el-dialog打开一次后无法再次打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • Vue下拉框双向联动效果的示例代码

    Vue下拉框双向联动效果的示例代码

    这篇文章主要介绍了Vue下拉框双向联动效果,实现联动，大家都知道在vue的页面中，想要实现多个<el-select 下拉框的值动态改变，必须要调用@change 函数，具体操作方法跟随小编一起学习下吧
    2022-04-04
  • vue实现输入框自动跳转功能

    vue实现输入框自动跳转功能

    这篇文章主要为大家详细介绍了vue实现输入框自动跳转功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05

最新评论