vue 数据导出word（带图片）或者（不带图片）的两种方法及实现效果中遇到的报错问题

qq_42714193

已于 2023-05-09 19:21:24 修改

阅读量1.6k

点赞数

文章标签： vue.js 前端 javascript vue word

于 2023-01-05 15:15:21 首次发布

本文链接：https://blog.csdn.net/qq_42714193/article/details/128562821

版权

一、导出word（带图片）

1、安装插件

npm install angular-expressions

npm install docxtemplater

npm install docxtemplater-image-module-free

npm install file-saver

npm install jszip@2.6.1

npm install jszip-utils

npm install pizzip

2、新建jquerywordexport.js页面，把下面的代码放上去

import PizZip from 'pizzip'

import Docxtemplater from 'docxtemplater'

import JSZipUtils from 'jszip-utils'

import { saveAs } from 'file-saver'

/**

* 将base64格式的数据转为ArrayBuffer

* @param {Object} dataURL base64格式的数据

*/

function Base64DataURLToArrayBuffer(dataURL) {

        const base64Regex = /^data:image\/(png|jpg|jpeg|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,支持图片

* @param {Object} tempDocxPath 模板文件路径

* @param {Object} wordData 导出数据

* @param {Object} fileName 导出文件名

* @param {Object} imgSize 自定义图片尺寸

* @param {Object} title 附件名称

*/

export const ExportWord = (tempDocxPath, wordData, fileName, imgSize, title) => {

        // 这里要引入处理图片的插件

        var ImageModule = require('docxtemplater-image-module-free')

        const Expressions = require('angular-expressions')

        // 读取并获得模板文件的二进制内容

        JSZipUtils.getBinaryContent(tempDocxPath, function(error, content) {

                if (error) {

                        throw error

                }

                Expressions.filters.size = function(input, width, height) {

                        return {

                                data: input,

                                size: [width, height]

                        }

                }

                // 图片处理

                let opts = {}

                opts = {

                // 图像是否居中

                        centered: false

                }

                opts.getImage = (chartId) => {

                // console.log(chartId);//base64数据

                // 将base64的数据转为ArrayBuffer

                        return Base64DataURLToArrayBuffer(chartId)

                }

                opts.getSize = function(img, tagValue, tagName) {

                        // console.log(img);//ArrayBuffer数据

                        // console.log(tagValue);//base64数据

                        // console.log(tagName);//wordData对象的图像属性名

                        // 自定义指定图像大小

                        if (imgSize.hasOwnProperty(tagName)) {

                                return imgSize[tagName]

                        } else {

                                return [550, 350]

                        }

                }

                // 创建一个PizZip实例，内容为模板的内容

                const zip = new PizZip(content)

                // 创建并加载docxtemplater实例对象

                const doc = new Docxtemplater()

                doc.attachModule(new ImageModule(opts))

                doc.loadZip(zip)

                // doc.setData(wordData);

                doc.setData({

                        title: title,// 标题或者其他参数

                        ...wordData// 循环体

                })

                try {

                        // 用模板变量的值替换所有模板变量

                        doc.render()

                } catch (error) {

                // 抛出异常

                        const e = {

                                message: error.message,

                                name: error.name,

                                stack: error.stack,

                                properties: error.properties

                        }

                        console.log(JSON.stringify({

                                error: e

                        }))

                        throw error

                }

                // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）

                const out = doc.getZip().generate({

                        type: 'blob',

                        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'

                })

                // 将目标文件对象保存为目标类型的文件，并命名

                saveAs(out, fileName)

        })

}

3、在页面引入jquerywordexport.js

4、页面click点击事件

5、调用点击事件的时候

6、数据格式是

6、word格式是

7、demo.docx vue2放在static，vue3放在public下面

现在就可以呈现效果了。

二、不需要带图片的word导出

1、安装插件

npm install docxtemplater

npm install file-saver

npm install jszip@2.6.1

npm install jszip-utils

npm install pizzip

2、新建jquerywordexport.js页面，把下面的代码放上去

import PizZip from 'pizzip'

import Docxtemplater from 'docxtemplater'

import JSZipUtils from 'jszip-utils'

import { saveAs } from 'file-saver'



* 导出word

* @param {Object} tempDocxPath 模板文件路径

* @param {Object} wordData 导出数据

* @param {Object} fileName 导出文件名

* @param {Object} imgSize 自定义图片尺寸

* @param {Object} title 附件名称

*/

export const ExportWord = (tempDocxPath, wordData, fileName, imgSize, title) => {

        // 读取并获得模板文件的二进制内容

        JSZipUtils.getBinaryContent(tempDocxPath, function(error, content) {

                if (error) {

                        throw error

                }

                // 创建一个PizZip实例，内容为模板的内容

                const zip = new PizZip(content)

                // 创建并加载docxtemplater实例对象

                const doc = new Docxtemplater()

                doc.loadZip(zip)

                // doc.setData(wordData);

                doc.setData({

                        title: title,// 标题或者其他参数

                        ...wordData// 循环体

                })

                try {

                        // 用模板变量的值替换所有模板变量

                        doc.render()

                } catch (error) {

                // 抛出异常

                        const e = {

                                message: error.message,

                                name: error.name,

                                stack: error.stack,

                                properties: error.properties

                        }

                        console.log(JSON.stringify({

                                error: e

                        }))

                        throw error

                }

                // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）

                const out = doc.getZip().generate({

                        type: 'blob',

                        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'

                })

                // 将目标文件对象保存为目标类型的文件，并命名

                saveAs(out, fileName)

        })

}

剩下部分就和带有图片的部分是一样的了。导出带有图片的word和不带图片的word区别在于安装的插件和jquerywordexport.js 里面代码的区别。

在实现效果的过程中可能会遇到的错误

1、出现这个错误

解决方法：