vue 项目导出word格式文件

>> 欢迎您客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章

返回首页

>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持

书籍支持

卫琴直播

品书摘要

在线测试

资源下载

联系我们

Java技术网站 → 『 Java开发技术』 → 『 Web前端开发技术专题』 → vue 项目导出word格式文件

您是本文章第 16058 个阅读者

* 贴子主题: vue 项目导出word格式文件

点赞(0) 收藏

作者:javathinker 发表时间：2021-02-04 09:34:47

消息

查看

搜索

好友

复制

引用

插件安装：

//运行环境安装以下模块：docxtemplater、pizzip、jszip-utils、file-saver、docxtemplater-image-module-free

//各个模块初始化，可以单独存储为js文件，然后调用
import docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';
import ImageModule from 'docxtemplater-image-module-free'; //图片有关的
import fly from './request.js';

/**
4. 导出docx
5. @param { String } tempDocxPath 模板文件路径
6. @param { Object } data 文件中传入的数据
7. @param { String } fileName 导出文件名称
*/
export const exportDocx = (tempDocxPath, data, fileName) => {
  // 读取并获得模板文件的二进制内容
  JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
    if (error) {
      throw error;
    }

                    //图片模块
    var opts = {}
    opts.centered = false;
      opts.getImage = function (tagValue, tagName) {
          tagValue  = fly.config.IMG_URL + tagValue
        return new Promise(function (resolve, reject) {
          JSZipUtils.getBinaryContent(tagValue, function (error, content) {
            if (error) {
              return reject(error);
            }
            return resolve(content);
          });
        });
      }
      opts.getSize = function (img, tagValue, tagName) {
          tagValue  = fly.config.IMG_URL + tagValue
        // FOR FIXED SIZE IMAGE :
         return [470, 210];//图片大小（这个可以写成动态的，开发文档上有）
        return new Promise(function (resolve, reject) {
          var image = new Image();
          image.src = url;
          image.onload = function () {
            resolve([image.width, image.height]);
          };
          image.onerror = function (e) {
            console.log('img, tagValue, tagName : ', img, tagValue, tagName);
            reject(e);
          }
        });
      }
      var imagemodule = new ImageModule(opts);
      //zip模块
      let zip = new PizZip(content);

    let doc = new docxtemplater().loadZip(zip).attachModule(imagemodule).compile();

                doc.resolveData(data).then(function () {
            try {
                // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
                doc.render();
                var out = doc.getZip().generate({
                  type: "blob",
                  mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
                });
                //输出文档
                saveAs(out, fileName);

              } catch (error) {
                let e = {
                  message: error.message,
                  name: error.name,
                  stack: error.stack,
                  properties: error.properties,
                };
                console.log({
                  error: e
                });
                // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).
                throw error;
              }

        });

    })

                        };

引入：

import { exportDocx } from '../../assets/js/docx.js';

调用：

//downloadUrl:模板文件路径 data:要导出的数据 filename:导出的文件名
exportDocx(downloadUrl,data,filename);

模板文件语法：

截屏18.53.45.png

参考链接：https://www.jianshu.com/p/b3622d6f8d98

https://docxtemplater.readthedocs.io/en/latest/index.html

----------------------------
原文链接:https://www.jianshu.com/p/59cb276e66a6

程序猿的技术大观园：www.javathinker.net

[这个贴子最后由 flybird 在 2021-02-04 23:45:20 重新编辑]

Java精品书籍推荐