美文网首页
Vue-纯前端导出word文档

Vue-纯前端导出word文档

作者: yichen_china | 来源:发表于2022-05-27 10:28 被阅读0次

    在项目中,我们可以借助后端返回文件流实现文件下载。如果前端有数据,也可以借助前端框架进行下载。本文将介绍如何在前端纯js实现word文档导出。

    1. 组件介绍

    要实现前端纯js导出word文档,我们需要用到docxtemplater,jszip-utils,file-saver三个组件,接下来简要的介绍以下三个组件。

    1.1 docxtemplater

    docxtemplater 使用 JSON 数据格式作为输入,可以处理docx 和 ppt模板。不像一些其它的工具,比如 docx.js, docx4j, python-docx 等,需要自己编写代码来生成文件,docxtemplater只需要用户通过标签的形式编写模板,就可以生成文件。

    贴一贴官网给的例子,我们将参考以下例子来实现。

    var PizZip = require('pizzip');
    var Docxtemplater = require('docxtemplater');
    
    var fs = require('fs');
    var path = require('path');
    
    //Load the docx file as a binary
    var content = fs
        .readFileSync(path.resolve(__dirname, 'input.docx'), 'binary');
    
    var zip = new PizZip(content);
    
    var doc = new Docxtemplater();
    doc.loadZip(zip);
    
    //set the templateVariables
    doc.setData({
        first_name: 'John',
        last_name: 'Doe',
        phone: '0652455478',
        description: 'New Website'
    });
    
    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 buf = doc.getZip()
                 .generate({type: 'nodebuffer'});
    
    // buf is a nodejs buffer, you can either write it to a file or do anything else with it.
    fs.writeFileSync(path.resolve(__dirname, 'output.docx'), buf);
    
    

    1.2 jszip-utils

    jszip-utils 提供一个getBinaryContent(path, data)接口,path即是文件的路径,支持AJAX get请求,data为读取的文件内容。下面是官网给的例子。

    // loading a file and add it in a zip file
    JSZipUtils.getBinaryContent("path/to/picture.png", function (err, data) {
       if(err) {
          throw err; // or handle the error
       }
       var zip = new JSZip();
       zip.file("picture.png", data, {binary:true});
    });
    
    

    1.3 file-saver

    file-saver是一款适合在客户端生成文件的工具,它提供的接口saveAs(blob, "1.docx")将会使用到。

    2. 操作步骤

    2.1 安装

    接下来就是安装以上组件工具,安装命令如下

    -- 安装 docxtemplater
    cnpm install docxtemplater pizzip  --save
    
    -- 安装 jszip-utils
    cnpm install jszip-utils --save 
    
    -- 安装 jszip
    cnpm install jszip --save
    
    -- 安装 FileSaver
    cnpm install file-saver --save
    
    

    2.2 引入

    在需要用到的组件中引入以上工具

        import docxtemplater from 'docxtemplater'
        import PizZip from 'pizzip'
        import JSZipUtils from 'jszip-utils'
        import {saveAs} from 'file-saver'
    
    

    2.3 创建模板文件

    我们要先创建一个模板文件,事先定义好格式和内容。docxtemplater 之前介绍到是通过标签的形式来填充数据的,简单的数据我们可以使用{} + 变量名来实现简单的文本替换。

    • 简单的文本替换

    如果在模板中,定义

    hello {name}
    
    

    在设置数据时,定义

    {name:'John'}
    
    

    最终生成的文件,如下

    hello John
    
    

    有点像jsp中的变量解析。

    • 循环输出

    稍微复杂点的像表格,我们会传递一个数组。那这个表格标签实现起来挺简单的,例子如下:

    模板文件,定义如下:

    {#products}
        {name}, {price} €
    {/products}
    
    

    设置数据时,定义如下:

    {
        "products": [
            { name :"Windows", price: 100},
            { name :"Mac OSX", price: 200},
            { name :"Ubuntu", price: 0}
        ]
    }
    
    

    最终实现效果如下:

    Windows, 100 €
    Mac OSX, 200 €
    Ubuntu, 0€
    
    

    如果数组中的都是字符串,不是对象类型,比如数据结构如下

    {
       "products": [
           "Windows",
           "Mac OSX",
           "Ubuntu"
       ]
    }
    
    

    那么,模板文件中应该这样设置

    {#products} {.} {/products}
    
    

    最终的文件内容如下:

    Windows Mac OSX Ubuntu
    
    

    还有一些其它的复杂标签,比输支持条件判断,支持段落等等,笔者就不在这里一一赘述了。详情参考官网文档。笔者的要导出的比较简单,前端页面如下:

    image

    模板如下,笔者放在了\static\model.docx路径下:

    image

    在项目的位置如下,笔者是在Add.vue组件中引入的,相对模板路径为../../static/word/template.docx 。

    image

    使用

    我们可以参照 docxtemplater 给出的例子, 来实现文件导出。

    1. 读取模板文件内容
    2. 装载到zip对象中
    3. 设置文件数据
    4. 生成文件
    5. 保存文件

    代码如下:

     // 点击导出word
      exportWord: function() {
        let that = this;
        // 读取并获得模板文件的二进制内容
        JSZipUtils.getBinaryContent("../../static/model.docx", function(error, content) {
          // model.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error;
          }
    
          // 创建一个PizZip实例,内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docxtemplater实例对象
          let doc = new docxtemplater().loadZip(zip);
          // 设置模板变量的值
          doc.setData({
            table: that.videoParam.data
          });
    
          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
            };
            console.log(JSON.stringify({ error: e }));
            throw error;
          }
    
          // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
          let out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          });
          // 将目标文件对象保存为目标类型的文件,并命名
          saveAs(out, "视频参数.docx");
        });
      }
    
    

    最终下载的效果如下

    image

    注意

    很多朋友都说遇到了以下问题,笔者当时开发也遇到过,经检验是以下两个问题引入的,希望大家再检查下相关路径和配置。

     Can't find end of central directory : is this a zip file ? 
    
    
    • docxtemplater 不支持jszip,会有报错,因此要使用PizZip
    • 注意模板的路径要写正确,不然会报错找不到文件

    这位同学也是因为路径报上述错误,点击查看

    总结

    本文简单的介绍了如何在前端使用已有的工具来实现前端导出word文档,希望对有类似需求的童鞋们有所帮助。

    参考文章:

    https://www.jianshu.com/p/b3622d6f8d98

    相关文章

      网友评论

          本文标题:Vue-纯前端导出word文档

          本文链接:https://www.haomeiwen.com/subject/ltemprtx.html