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下。

word模版占位符用法

三、导出方法

//导入包
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变量。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/78231.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

用 React+ts 实现无缝滚动的走马灯

一、走马灯的作用 走马灯是一种常见的网页交互组件&#xff0c;可以展示多张图片或者内容&#xff0c;通过自动播放或者手动切换的方式&#xff0c;让用户能够方便地浏览多张图片或者内容。 本次实现的不是轮播图而是像传送带一样的无限滚动的形式。 二、需求梳理 走马灯可设…

大数据培训前景怎么样?企业需求量大吗

大数据行业对大家来说并不陌生&#xff0c;大数据行业市场人才需求量大&#xff0c;越早入行越有优势&#xff0c;发展机会和上升空间等大。不少人通过大数据培训来提升自己的经验和自身技术能力&#xff0c;以此来获得更好的就业机会。 2023大数据培训就业前景怎么样呢?企业需…

034_小驰私房菜_[问题复盘] Qcom平台,某些三方相机拍照旋转90度

全网最具价值的Android Camera开发学习系列资料~ 作者:8年Android Camera开发,从Camera app一直做到Hal和驱动~ 欢迎订阅,相信能扩展你的知识面,提升个人能力~ 【一、问题】 某些三方相机,预览正常,拍照旋转90度 【二、问题排查】 1 ) HAL这边Jpeg编码数据在哪个地方…

Baumer工业相机堡盟工业相机如何通过BGAPI SDK设置相机的固定帧率(C++)

Baumer工业相机堡盟工业相机如何通过BGAPI SDK设置相机的固定帧率&#xff08;C&#xff09; Baumer工业相机Baumer工业相机的固定帧率功能的技术背景CameraExplorer如何查看相机固定帧率功能在BGAPI SDK里通过函数设置相机固定帧率 Baumer工业相机通过BGAPI SDK设置相机固定帧…

Python发送QQ邮件

使用Python的smtplib可以发送QQ邮件&#xff0c;代码如下 #!/usr/bin/python3 import smtplib from email.mime.text import MIMEText from email.header import Headersender 111qq.com # 发送邮箱 receivers [222qq.com] # 接收邮箱 auth_code "abc" # 授权…

大数据-玩转数据-Flink RedisSink

一、添加Redis Connector依赖 具体版本根据实际情况确定 <dependency><groupId>org.apache.flink</groupId><artifactId>flink-connector-redis_2.11</artifactId><version>1.1.5</version> </dependency>二、启动redis 参…

两个案例熟悉String的基本操作

1、第一个案例 Java语言规范要求完全相同的字符串字面量&#xff0c;应该包含同样的Unicode字符序列&#xff08;包含同一份码点序列的常量&#xff09;&#xff0c;并且必须是指向同一个String类实例。 package string; public class StringTest4 {public static void main(St…

AutoSAR系列讲解(深入篇)13.3-Mcal Dio配置

目录 一、Dio port配置 二、Dio pin配置 一、Dio port配置 同之前的Port一样,双击进入Dio配置界面后会看到几乎差不多的配置界面。General和Port类似,我们不再赘述,主要讲解Dio的配置 1. 其实Dio并没有什么实质的作用,主要起到了一个重命名的功能。双击DioConfig_0进入下…

文本图片怎么转Excel?分享一些好用的方法

在处理数据时&#xff0c;Excel 是一个非常强大的工具&#xff0c;但有时候需要将文本和图片转换为 Excel 格式&#xff0c;这可能会让人感到困惑。在本文中&#xff0c;我们将介绍一些好用的方法&#xff0c;以便您能够轻松地将文本和图片转换成 Excel 格式。 将文本图片为Exc…

高性能本地缓存Ristretto(四)—— NumCounters 与 MaxCost参数的设置

ristretto 参数 我在使用ristretto时&#xff0c;对于参数的设置有些疑问。主要是 NumCounters &#xff0c;MaxCost 分别表示什么含义&#xff0c;以及如何确定其数值的问题。 在此记录并分享一下&#xff0c;欢迎各位批评指正&#xff0c;谢谢 官方的指导 先看一下官方的…

前端开发,怎么解决浏览器兼容性问题? - 易智编译EaseEditing

解决浏览器兼容性问题是前端开发中常见的挑战之一。不同的浏览器可能对网页元素的渲染和功能支持有所不同&#xff0c;因此需要采取一些策略来确保您的网页在不同浏览器上都能正常运行和呈现。以下是一些解决浏览器兼容性问题的方法和策略&#xff1a; 使用CSS Reset&#xff…

MMdetection在VisDrone2019上训练FCOS和CenterNet

配置环境 Python 3.5>PyTorch 1.1>CUDA 9.0NCCL 2>GCC 4.9mmcv‘’ 把mmdetection的代码下载下来 git clone https://github.com/open-mmlab/mmdetection.git进入这个mmdetection文件,准备编译mmdetection的文件 cd mmdetection 装一下下面这些包&#xff0c; #…

idea cannot download sources 解决方法

问题 点击class文件右上角下载源码失败 解决方案 找到idea terminal 控制台cd 至maven工程执行 mvn dependency:resolve -Dclassifiersources

ElasticSearch相关概念

1、概述 先说Elasticsearch的文件存储&#xff0c;Elasticsearch是面向文档型数据库&#xff0c;一条数据在这里就是一个文档&#xff0c;用JSON作为文档序列化的格式&#xff0c;比如下面这条用户数据&#xff1a; {"name" : "John","sex"…

web连接桌面打开gptmap

一&#xff1a;环境配置 需要的材料&#xff1a; python-3.10.4 我使用的是这个版本的&#xff0c;3.8.10 该版本和以下版本组件组合&#xff0c;验证过能正常运行&#xff08;python 3.6.8测试异常&#xff09; websockify 该项目有python版本和node js版本 noVNC 形式的app…

Android-网络访问技术Retrofit浅析

Retrofit是一种基于注解的网络请求库&#xff0c;专门用于在Android应用中进行网络访问。它使用简洁的方式定义了网络请求的接口&#xff0c;并自动将请求结果解析为Java对象。Retrofit的核心原理是利用了Java的动态代理技术&#xff0c;将网络请求接口的注解信息转化为具体的网…

JDK 20下载与安装 (Windows 11系统)

JDK(Java Development Kit)是 Java 语言的软件开发工具包&#xff0c;主要用于移动设备、嵌入式设备上的java应用程序。JDK是整个java开发的核心&#xff0c;它包含了JAVA的运行环境&#xff08;JVMJava系统类库&#xff09;和JAVA工具。 JDK 20 下载 JDK 官网路径&#xff1…

中期国际:MT4数据挖掘与分析方法:以数据为导向,制定有效的交易策略

在金融市场中&#xff0c;制定有效的交易策略是成功交易的关键。而要制定一份可靠的交易策略&#xff0c;数据挖掘与分析方法是不可或缺的工具。本文将介绍如何以数据为导向&#xff0c;利用MT4进行数据挖掘与分析&#xff0c;从而制定有效的交易策略。 首先&#xff0c;我们需…

一次网络不通“争吵“引发的思考

作者&#xff1a; 郑明泉、余凯 为啥争吵&#xff0c;吵什么&#xff1f; “你到底在说什么啊&#xff0c;我K8s的ecs节点要访问clb的地址不通和本地网卡有什么关系…” 气愤语气都从电话那头传了过来&#xff0c;这时电话两端都沉默了。过了好一会传来地铁小姐姐甜美的播报声…

消息队列

消息队列是和管道并列的概念&#xff0c;也是进程间通信IPC中的一种。 本文参考&#xff1a;消息队列&#xff08;定义、结构、如何创建、消息队列的发送与接收、发送与接收实例&#xff09;_咋么又饿了的博客-CSDN博客 基本概念 消息队列是一种先进先出的队列型数据结构&…