前端生成word解决方案

根据数据生成pdf有两个比较好用的包,officegen是采用api的方式生成word、docxtemplater是使用docx文件模版的方式生成word。个人觉得docxtemplater更加方便,对图片,格式支持的更加完善

officegen

  • 创建 Word 文档。
  • 您可以在文档中添加一个或多个段落,并且可以设置字体、颜色、对齐方式等。
  • 您可以添加图像。
  • 支持页眉和页脚。
  • 支持书签和超链接。
  // 代码示例
  const officegen = require('officegen');
  let docx = officegen('docx');
  async createWord(ctx) {
        const postData = ctx.request.body;
        const { data, fileName } = postData; // 拿到需要渲染的数据

        docx.on('finalize', function (written) { // 监听创建结束
            console.log(
                'Finish to create a Microsoft Word document.'
            )
        })

        docx.on('error', function (err) { // 监听生成失败
            console.log(err)
        })

        let pObj = docx.createP() // 创建一个页面
        // pObj.addImage(path.resolve(__dirname, 'myFile.png'), {cx: 300, cy: 200}) // 添加一张图片(目前没生效)
        // docx.putPageBreak() // 结束当前页
        pObj = docx.createP()  // 创建一个新页面
        data.forEach((item, index) => { // 循环数据添加文本
            pObj.addLineBreak(); // 添加一个空行
            item.user && pObj.addText('账号:' + (item.user?.screen_name || '用户' + item.user?.id + ', ')); // 添加一段文案
            pObj.addLineBreak(); // 添加一个空行
            item.fav_count && pObj.addText('收藏:' + item.fav_count + ', ', { blod: true, font_face: '宋体', font_size: 12 }); // 添加一段文案含样式
            pObj.addLineBreak();
        })

        let out = fs.createWriteStream(fileName + '.docx');

        out.on('error', function (err) {
            console.log(err)
        })
        docx.generate(out) //将docx灌到可写流中

        ctx.body = { // 返回
            result_code: 0,
            url: fileName + '.docx',
            state: 'success',
        };
   }
   async downloadFild(ctx) { // 导出并删除文件
        const fileName = ctx.query.path;
        ctx.attachment(path.resolve(__dirname, fileName));
        await send(ctx, path);
        setTimeout(() => {
            // 删除文件
            fs.unlink(path.resolve(__dirname, fileName), (err) => {
                console.log('文件已被删除');
            });
        }, 15000);
    }

附上文档: https://github.com/Ziv-Barber/officegen/blob/master/manual/docx/README.md

docxtemplater

  • 它的工作方式与模板引擎相同,你给它一个模板+一些数据,它会输出一个生成的文档。
  • 可以抽象地处理循环、条件和其他功能
  • 可以使用 docxtemplater-image-module-free 模块来插入图片(不要使用docxtemplater-image-module)
  • 可以使用 docxtemplater-html 模块插入超链接(模块需要付费)
  • 排版字体等以模版为准,代码不需要关注

input.docx模版文件部分截图


image.png
// 代码示例
const fs = require('fs');
const https = require("https");
const path = require('path');
const moment = require('moment');
const Stream = require("stream").Transform;
require('events').EventEmitter.defaultMaxListeners = 20;
const PizZip = require("pizzip");
const ImageModule = require('docxtemplater-image-module-free'); // 版本为1.1.1 不要使用docxtemplater-image-module
const Docxtemplater = require("docxtemplater");// 版本为3.37.11

// 将远程url图片转成流
function getHttpData(url, callback) {
    https.request(url, function (response) {
        if (response.statusCode !== 200) {
            return callback(new Error(`请求失败`));
        }
        const data = new Stream();
        response.on("data", function (chunk) {
            data.push(chunk);
        });
        response.on("end", function () {
            callback(null, data.read());
        });
        response.on("error", function (e) {
            callback(e);
        });
    }).end();
}


// 将base64 url转换为Buffer
function base64Parser(dataURL) {
    const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/; //base64结构前缀
    const validBase64 = /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/;
    if (typeof dataURL !== "string" || !base64Regex.test(dataURL)) {//不是base64
        return false;
    };

    if (!validBase64.test(dataURL)) {
        throw new Error("Error parsing base64 data, your data contains invalid characters");
    };

    const stringBase64 = dataURL.replace(base64Regex, "");

    if (typeof Buffer !== "undefined" && Buffer.from) {
        return Buffer.from(stringBase64, "base64");
    };

    const binaryString = window.atob(stringBase64);
    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;
};

// 摘出html中的文案和图片,生成json
function formatHtml(html) { // 将html字符串处理成img和contain为键值的json用于渲染在模版中
    let arr = html.replace(/<(?!img)[^>]+>/gi, "<div>").split('<div>');
    return arr.map(item => {
        if (/<img\s+.*? class="ke_img" +?>/gi.test(item)) {// 有图片,生成json
            return {
                img: item.replace(/<img[^>]*\bsrc="(.*?)" +?class="ke_img" +?>/gi, function (...arg) {
                    return arg[1]
                })
            }
        }
        if (item.replace(/<[^>]+>|&[^>]+;/g, '')) {
            return { contain: item.replace(/<[^>]+>|&[^>]+;/g, '') } // 一版文本文案
        } else {
            return '';
        }
    }).filter(item => item)
};

const imageOptions = {// 图片配置
    centered: true,// 图片在文档中局中
    getImage(tagValue) {
        const base64Value = base64Parser(tagValue);//base64链接处理
        if (base64Value) {
            return base64Value;
        }
        return new Promise(function (resolve, reject) {
            getHttpData(tagValue, function (err, data) {// 网络图片链接生成buffer
                if (err) {
                    return reject(err);
                }
                resolve(data);
            });
        })
    },
    getSize(img) {
        const sizeOf = require("image-size"); // 获取图片真实大小,按比例缩放
        const sizeObj = sizeOf(img);
        const forceWidth = 600;
        const ratio = forceWidth / sizeObj.width;
        return [
            forceWidth,
            Math.round(sizeObj.height * ratio),
        ];
    },
};


class ApiController {
    async createDocx(ctx) {
        const postData = ctx.request.body;
        const { data, fileName, screenName, start_day, end_day, total } = postData;

        // 读取docx模版流
        const content = fs.readFileSync(
            path.resolve(__dirname, "input.docx"), // 模版文件
            "binary"
        );

        //将文件转为zip文件
        const zip = new PizZip(content);

        // 实例化docx模版对象
        const doc = new Docxtemplater(zip, {
            paragraphLoop: true,
            linebreaks: true,
            parser: null,
            showErrors: true,
            modules: [new ImageModule(imageOptions)], // 图片处理模块
        });
        // 格式化数据
        const formatedData = data.map((item, index) => {
            let temp = JSON.parse(JSON.stringify(item));

            if (temp.title || temp.description) {
                temp.index = index + 1;
                temp.title = formatHtml(temp.title || temp.description) || []
            }
            if (temp.text) {
                temp.text = formatHtml(temp.text) || [];
                if (temp.text.filter(item => item.img).length) {
                    temp.img_num = temp.text.filter(item => item.img).length;
                }
            })
            return temp;
        })
        // 异步写入所有数据(因为图片的生成),没有网络图片使用render即可
        await doc.renderAsync({ data: formatedData, screenName, start_day, end_day, curDate: moment().format('YYYY年MM月DD日 HH:mm:ss'), total }).then(() => { });

        //doc对象生成buf
        const buf = doc.getZip().generate({
            type: "nodebuffer",
            compression: "DEFLATE",
        });

        //创建docx流,并将buf写入流
        let upStream = fs.createWriteStream(fileName + '.docx');
        upStream.write(buf);
        upStream.end();
        upStream.on('close', () => {
            console.log('写入的文件路径是' + upStream.path)
        })
        // 返回数据
        ctx.body = {
            result_code: 0,
            url: upStream.path,
            state: 'success',
        };

    }
}
module.exports = new ApiController();




以上解决了网络图片问题处理

附上官方文档:https://docxtemplater.com/docs/get-started-node/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,837评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,551评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,417评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,448评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,524评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,554评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,569评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,316评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,766评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,912评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,560评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2 352

推荐阅读更多精彩内容