基于Nodejs的word(office)文档实现方法(一)

    在线编辑office文档(word、excel、powerpoint等)的实现方式可以归集为两种:

    1、纯前端的在线编辑,如点聚WebOffice、金格WebOffice、PageOffice、ntko office、DSOFramer等,一般基于ActiveX控件实现,在各个浏览器逐步严控甚至禁止各类客户端控件的大背景下,这些解决方案的应用空间将会越来越小。当然近年也出现了一些基于云端office的解决方案,例如畅写office,前端不再依赖ActiveX控件,但云端服务器上的留痕始终让人不放心。

    2、后端创建、前端预览方式,如果要修改后台创建的office文档,则可以采用前端下载后修改,然后在上传更新后台文档;当然也可以有限集成纯前端在线编辑功能,以对后台创建的文档进行编辑,虽然笔者不建议这么做,毕竟前端的在线编辑功能再强大,也没有在自己电脑上用office进行编辑来的方便、灵活。

    本文主要介绍第二种方式,即“后端创建、前端预览”的相关实现方式,和注意事项。包括如下内容:

1、 开发环境

2、 后端创建方式一:新创建文档

3、 后端创建方式二:基于模板创建文档

4、 前端预览

5、 几个坑

一、 开发环境

    前端,vuejs,UI是quasar

    后端,nodejs

二、 后端创建方式一:新创建文档

    基于officegen(https://github.com/Ziv-Barber/officegen)实现office(word、excel、powerpoint)文档的创建。

   安装组件: npm i officegen --save-dev

    实现代码:

import fs from 'fs'

import path from 'path'

import officegen from 'officegen'

module.exports = {

    createpgbg:async (rwbh) => {

    //创建word对象

    let docx = officegen('docx') ;

    docx.on('finalize', function(written){

        console.log( '成功创建了word文件.' ) }) // Officegen calling this function to report errors:

    docx.on('error', function(err) { console.log(err) })

    let pObj = docx.createP() ;

    pObj.addText('Simple')

    pObj.addText(' with color', { color: '000088' })

    pObj.addText(' and back color.', { color: '00ffff', back: '000088' })

    pObj = docx.createP() pObj.addText('Since ')

    pObj.addText('officegen 0.2.12', { back: '00ffff', shdType: 'pct12', shdColor: 'ff0000' }) // Use pattern in the background.

    pObj.addText(' you can do ')

    pObj.addText('more cool ', { highlight: true }) // Highlight!

    pObj.addText('stuff!', { highlight: 'darkGreen' }) // Different highlight color.

    pObj = docx.createP()

    pObj.addText('Even add ')

    pObj.addText('external link', { link: 'https://github.com' })

    pObj.addText('!') pObj = docx.createP()

    pObj.addText('Bold + underline', { bold: true, underline: true })

    pObj = docx.createP({ align: 'center' })

    pObj.addText('Center this text', { border: 'dotted', borderSize: 12, borderColor: '88CCFF' })

    pObj = docx.createP()

    pObj.options.align = 'right'

    pObj.addText('Align this text to the right.')

    pObj = docx.createP()

    pObj.addText('Those two lines are in the same paragraph,')

    pObj.addLineBreak()

    pObj.addText('but they are separated by a line break.')

    docx.putPageBreak()

    pObj = docx.createP()

    pObj.addText('Fonts face only.', { font_face: 'Arial' })

    pObj.addText(' Fonts face and size.', { font_face: 'Arial', font_size: 40 })

    docx.putPageBreak()

    pObj = docx.createP()

    pObj.addImage('assets/uploads/1.jpg')

    let out = fs.createWriteStream('example1.docx')

    out.on('error', function(err) { console.log(err) })

    docx.generate(out)

}

}

基于Nodejs的word(office)文档实现方法(一)_第1张图片
以上代码生成的word效果


三、后端创建方式二:基于模板创建文档

    基于docxtemplater组件(https://github.com/open-xml-templating/docxtemplater)实现基于模板的office(word、excel、powerpoint)文档创建。

    安装组件:npm i docxtemplater --save-dev

                      npm i [email protected] --save-dev

                       npm i docxtemplater-image-module-free--save-dev

    实现代码:

import fs from 'fs'

import path from 'path'

import jszip from 'jszip'

import docxtemplater from 'docxtemplater'

import docximagetemplater from'docxtemplater-image-module-free'

module.exports = {

  createpgbg:async(rwbh) => {

    //打开word模板文件

    let content =fs.readFileSync(path.resolve(__dirname,'../../assets/report/pgbgV2019.docx'),'binary');

    let zip = newjszip(content) ;

    let doc = newdocxtemplater() ;

    let opts = {

      centered:false,

     fileType:'docx',

      getImage:function(tagValue, tagName) {

        returnfs.readFileSync(path.join(__dirname, '../../assets/uploads/' + tagValue));

      },

      getSize:function(img, tagValue, tagName) {

        if(tagName== "a57"){

          return[350, 370];

        }

        elseif(tagName == "a58"){

          return[240, 180];

        }

        elseif(tagName == "a59"){

          return[240, 160];

        }

        else{

          return[100, 100];

        };

      }

    };

   doc.attachModule(new docximagetemplater(opts)) ;

   doc.loadZip(zip) ;

    //装载数据

    doc.setData({

      a53:'八一路',

      a54:'苏州东路',

      a55:'康平路',

      a56:'小区内水、电、气、有线电视等基础设施配套齐全,附近有学校、超市、菜场,商业、服务网点齐全,附近有公交站台,生活较方便',

     a57:'img1.jpg',

     a58:'img2.jpg',

     a59:'img3.jpg'

    }) ;

    try{

      //替换数据

      doc.render();

   }catch(error){};

    //保存文件

    let buf =doc.getZip().generate({type:'nodebuffer'}) ;

   fs.writeFileSync(path.resolve(__dirname,'../../assets/report/pgbg.docx'),buf);

    let filename ='2020-pgbg.docx' ;

    return{fileurl:filename} ;

  }

}


基于Nodejs的word(office)文档实现方法(一)_第2张图片
WORD模板


基于Nodejs的word(office)文档实现方法(一)_第3张图片
创建的word文档效果

四、前端预览

前端预览的选择挺多,其中有三种方式经过笔者实际使用,感觉挺不错:

方式1:

src='https://view.officeapps.live.com/op/view.aspx?src=你需要展示的word文档' />

方式2: