前端生成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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容