15、vue 处理后台返回的文件流实现word文件导出；以及纯前端实现word文件导出

最新推荐文章于 2024-06-17 15:01:01 发布

前端@伦伦

最新推荐文章于 2024-06-17 15:01:01 发布

阅读量8k

点赞数 4

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/ljl960426/article/details/121207384

版权

1、调用后台处理文件流实现word文件导出

实现思路：前端调取后台接口，然后前端处理后台返回的文件流进行文件导出。

1.1以下是接口函数

export function dcwordfile(data){
    return request({
        url:"/yxpg/sgConPwrgridFNicety/v1/createTemplateWord",//接口地址
        method:"get",
        params:data,
        // responseType: `arraybuffer` //一定要写
        responseType:'blob',//将文件流转成blob对象
        noErrorMsg:true
    })
}

1.2、在需要下载文档的当前组件引入接口函数“dcwordfile”

import {dcwordfile} from “@/api/module/newGeneration”;

//点击导出word文件触发的方法
        exportWord(getdate){
            dcwordfile({
                date: getdate,
                areaid: this.Twoid
            }).then(res => {
                if(res.status == 200){
                    let blob = new Blob([res.data], {
                        type: `application/msword` //word文档为msword,pdf文档为pdf
                    });
                    let objectUrl = URL.createObjectURL(blob);
                    let link = document.createElement("a");
                    let fname = `电网负荷预测报告2021-10-11`; //下载文件的名字
                    link.href = objectUrl;
                    link.setAttribute("download", fname);
                    document.body.appendChild(link);
                    link.click();
                }else {
                    this.$message({
                        type: "error",
                        message: "导出失败"
                    })
                }
            })
        },

2、纯前端实现word文件导出

2.1、纯前端实现Word文档导出需要用到三个插件，docxtemplater，jszip-utils，file-saver；

组件介绍

1、docxtemplater

介绍

docxtemplater是一种邮件合并工具，它以编程方式使用，处理条件、循环，并且可以扩展为表格、HTML、图像等。

参考链接：https://docxtemplater.readthedocs.io/en/latest/index.html

用到的API

(1) new window.docxtemplater：

创建docxtemplater实例对象，返回一个新的docxtemplater对象

(2) loadZip(zip)：

docxtemplater对象加载zip实例
注意：必须从jszip的2.x版本向该方法传递一个zip实例

(3) setData(Tags):

设置模板变量的值

(4) render()：

此函数用模板变量的值替换所有模板变量

(5) getZip()：

此函数返回代表docxtemplater对象的zip

2、jszip-utils

介绍

jszip-utils是与jszip一起使用的跨浏览器的工具库

参考链接：https://stuk.github.io/jszip-utils/

用到的API

getBinaryContent()：

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

3、jszip

介绍

jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。

参考链接：https://stuk.github.io/jszip/

用到的API

(1) new JSZip()：

创建一个JSZip实例

(2) generate()：

此函数可以生成一个zip文件（不是一个真实的文件，而是在内存中的表示）

4、FileSaver

介绍

FileSaver.js 是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的应用。

参考链接：
https://www.cnblogs.com/yunser/p/7629399.html
https://www.npmjs.com/package/file-saver

用到的API

saveAs(blob, “1.docx”)：

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

2.2、安装插件

– 安装 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.3、在需要用到的组件引入

import docxtemplater from ‘docxtemplater’

import PizZip from ‘pizzip’

import JSZipUtils from ‘jszip-utils’

import {saveAs} from ‘file-saver’

2.4 创建模板文件

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

简单的文本替换

如果在模板中，定义

hello {name}

在设置数据时，定义

{name:‘John’}

最终生成的文件，如下

hello John

循环输出

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

模板文件定义：

{#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

我自己实现使用的模板如下

在这里插入图片描述

注意：

模板文件推荐放在静态目录文件下。

我所存放的位置

在这里插入图片描述

script代码

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

（1）读取模板文件内容

（2）装载到zip对象中

（3）设置文件数据

（4）生成文件

（5）保存文件

//点击导出word
        exportWord: function() {
            let that = this;
            // 读取并获得模板文件的二进制内容
            JSZipUtils.getBinaryContent("../../../../static/word/word.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({
                	...data, //data中的数据可以再模板中直接使用
                    date: data.date,
  					area: data.area,
				   xtzql: data.xtzql,
				   dwzql: data.dwzql,
				   yc_max: data.yc_max,
				   sj_max: data.sj_max,
				   yc_max: data.yc_max,
				   yc_min: data.yc_min,
				   yc_avg: data.yc_avg,
				   sj_avg: data.sj_avg,
                });

                try {
                    // 用模板变量的值替换所有模板变量
                    doc.render();
                } catch (error) {
                    // 抛出异常
                    let data = {
                        message: error.message,
                        name: error.name,
                        stack: error.stack,
                        properties: error.properties
                    };
                    console.log(JSON.stringify({ error: data }));
                    throw error;
                }

                // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
                let out = doc.getZip().generate({
                    type: "blob",
                    mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                });
                // 将目标文件对象保存为目标类型的文件，并命名
                saveAs(out, "视频参数.docx");
            });
        }

参数data的数据

{
  date: "2021-11-08",
  area: "国调",
  xtzql: "5.011",
  dwzql: "96.18",
  yc_max: "183698.52",
  sj_max: "193742.28",
  yc_max: "178154.78",
  yc_min: "185972.92",
  yc_avg: "180771.27",
  sj_avg: "190105.12",
}