vue项目根据word模版导出word文件

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

一、安装依赖

//1、docxtemplater

npm install docxtemplater pizzip -S


//2、jszip-utils

npm install jszip-utils -S


//3、pizzip

npm install pizzip -S


//4、FileSaver
npm install file-saver --save

二、创建word模版

也就是编辑一个word文档,文档中需要动态取值的地方用{变量}取值;表格数据可以进行循环,以{#数组变量名}开始,以{/数组变量名}结束,如果数组变量是字符串而非对象则{#table}{.}{/table}。图片以{%图片base64变量名}展示,{%%图片base64变量名}表示图片居中。word模版放在public下。

vue项目根据word模版导出word文件,vue.js,前端,javascript

vue项目根据word模版导出word文件,vue.js,前端,javascript

word模版占位符用法

vue项目根据word模版导出word文件,vue.js,前端,javascript

三、导出方法

//导入包
import PizZip from 'pizzip'
import docxtemplater from 'docxtemplater'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'

data() {
    return {
        form: {
            userName: "杰克",
            value: "666", 
        },
        // 表格信息
        tableData: [],
        //图片
        img1: '',
        img2: ''
    };
},



methods:{
// 导出echarts图片,格式转换,官方自带,不需要修改
base64DataURLToArrayBuffer(dataURL) {
    const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
    if (!base64Regex.test(dataURL)) {
        return false;
    }
    const stringBase64 = dataURL.replace(base64Regex, "");
    let binaryString;
    if (typeof window !== "undefined") {
        binaryString = window.atob(stringBase64);
    } else {
        binaryString = new Buffer(stringBase64, "base64").toString("binary");
    }
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes.buffer;
},
// 点击导出word
exportWord() {
    //这里要引入处理图片的插件,下载docxtemplater后,引入的就在其中了
    var ImageModule = require('docxtemplater-image-module-free');
    var fs = require("fs");
    const expressions = require("angular-expressions");

    let _this = this;

    // 读取并获得模板文件的二进制内容,放在项目中即可(wordTemplate.docx是public文件下的word模版)
    JSZipUtils.getBinaryContent("wordTemplate.docx", function(error, content) {
        if (error) {
            throw error;
        };

        expressions.filters.size = function (input, width, height) {
            return {
                data: input,
                size: [width, height],
            };
        };
        function angularParser(tag) {
            const expr = expressions.compile(tag.replace(/’/g, "'"));
            return {
                get(scope) {
                    return expr(scope);
                },
            };
        }

        // 图片处理
        let opts = {}
            opts = { centered: false };
            opts.getImage = (chartId)=> {
            return _this.base64DataURLToArrayBuffer(chartId);
        }
        opts.getSize = function(img, tagValue, tagName) {
            console.log(tagName)
            //自定义指定图像大小,此处可动态调试各别图片的大小
            if (tagName === "chartImg1") return [249,200];
            return [300,200];
        }

        // 创建一个PizZip实例,内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater();
        // 去除未定义值所显示的undefined
        doc.setOptions({nullGetter: function() { 
            return ""; 
        }});
        doc.attachModule(new ImageModule(opts));
        doc.loadZip(zip);


        // 设置模板变量的值(键是word模版中用的值,值是vue文件data中的变量)
        doc.setData({
            ..._this.form,
            table: _this.tableData,
            img1: _this.img1,
            img2: _this.img2
        });

        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");
    });
},
}

ECHARTS图表的图片并转为base64格式,在图表加载完成时

this.img2 = myChart2.getDataURL({
      pixelRatio: 2,      // 导出的图片分辨率比例,默认为 1。
      backgroundColor: '#fff'   // 导出的图片背景色,默认使用 option 里的 backgroundColor
});

如果是需要动态添加的背景图,可以直接将图片的base64码赋值给img1变量。

4、导出时echart图表没有数据的问题

原因在于echarts图是动态的,解决办法是图表的nimation设置为false

vue项目根据word模版导出word文件,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-656224.html

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

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

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

相关文章

  • Java根据excel模版导出Excel(easyexcel、poi)——含项目测试例子拿来即用

    一般列表导出以及个性化样式设置请看下面的文章: JAVA导出Excel通用工具类——第一篇:详细介绍POI 导出excel的多种复杂情况,包括动态设置筛选、动态合并横向(纵向)单元格等多种复杂情况. JAVA导出Excel通用工具——第二篇:使用EasyExcel导出excel的多种情况的例子介绍.

    2024年04月29日
    浏览(41)
  • 前端(vue)js在线预览PDF、Word、Excel、ppt等office文件

    可选参数 pdf=true,word文档尝试以pdf方式显示,默认false watermark=水印文本,显示文本水印;“img:”+图片url表示图片水印,如:img:https://view.xdocin.com/demo/wm.png saveable=true,是否允许保存源文件,默认false printable=false,是否允许打印,默认true ©able=false,是否允许选择复制内容,

    2024年02月13日
    浏览(77)
  • 前端导出word文件的多种方式、前端导出excel文件

    先看效果: 这是页面中的table 这是导出后的效果: 需要的依赖: npm 自行安装,需要看官网的具体参数自行去github上面找对应的参数 具体代码:(先看word模板,在看代码,word中的变量和代码中 doc.setData() 是一一对应的) 包依赖: 代码 导出效果: 需要的依赖: node-xlsx 代码

    2024年03月24日
    浏览(100)
  • 【导出Word】如何使用Java+Freemarker模板引擎,根据XML模板文件生成Word文档(只含文本内容的模板)

    这篇文章,主要介绍如何使用Java+Freemarker模板引擎,根据XML模板文件生成Word文档。 目录 一、导出Word文档 1.1、基础知识 1.2、制作模板文件 1.3、代码实现 (1)引入依赖 (2)创建Freemarker工具类 (3)测试案例代码 (4)运行效果 Word文件有两种后缀格式,分别是:doc和docx,

    2024年02月13日
    浏览(66)
  • Java根据模版导出(ftl方式)

    实际项目中经常遇到需要根据模版导出数据,普通一点的导出模版都挺好实现的,如果涉及到勾选框、表格循环的方式就比较麻烦一点,这篇文章主要记录一下我在项目中是如何导出word(其中包括根据值勾选、表格循环、图片) 一、先准备一份word模版 如图: 此模版主要是

    2024年02月07日
    浏览(39)
  • vue项目中,动态src引入图片,并且js根据文件名后缀,判断文件图片、视频、文档、pdf等类型的方法

    vue根据文件地址,获取后缀,根据后缀判断类型,然后根据类型动态展示不同类型的照片 1、处理后缀,根据后缀判断类型   2、根据返回的结果,直接将文件名命名为返回的结果,比如我有个图片类型的文件,经过上述的方法,返回的是image,那我直接要显示的图片名称就为

    2024年02月06日
    浏览(57)
  • vue前端实现导出页面为word(两种方法)

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

    2024年04月25日
    浏览(42)
  • java 导出word,java根据提供word模板导出word文档

    本文主要讲解,利用poi-tl在word中动态生成表格行,进行文字、图片填充。一共提供了两种方式,1.基于本地文件 2.基于网络文件 本文讲解思路,1.先看示例,2. 示例对应的代码展示 3. 基本概念讲解(api自行查阅文档)。 这样便于快速展示,不符合你的业务需求的可以直接划走

    2024年02月14日
    浏览(43)
  • 前端html-docx实现html转word,预览并导出文件

    使用工具:html-docx 优势:图片、图表能直接预览并转为base64导出,省去后端难以实现图表的生成后插入的麻烦 劣势:适合一些简单的word模板导出(比如只有标题正文简单的表格图表图片的文档),复杂的可以直接忽略。比如:纸张大小、纸张方向、css大部分样式等等(经本

    2024年02月16日
    浏览(54)
  • vue若依导出word文件,简单的实现

    首先前端导包,注意exportDocx的导包位置要修改成你自己的 然后新建一个测试按钮 接下来是js文件 然后将下面这个docutil.js文件复制到项目中,我是复制在utils/docUtil中 最后新建一个word模板文件,保存的格式要是docx才行哦 例如: 只要数据是集合,就得是{#list} 开头{/list}结尾 如果还有

    2024年02月11日
    浏览(33)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包