前端JS调用浏览器打印服务打印doc文件

        头两天客户提了一个需求，原来某个业务流程的doc文档预览网页弹窗上，要添加一个一键打印的按钮，时间没做限制，但是要求尽量打印出来的效果和预览弹窗上的尽可能的一致。

        由于文档预览窗口的效果，是用JS和CSS模拟doc文本显示效果做的，本质上还是HTML那套。一开始想的直接将HTML元素给print打印出来，但是一看打印窗口的效果，简直不忍直视，要是一点点的改，麻烦不说，后期要是还有别的文档要打印，那岂不是个自己挖了个坑。。。

        于是这条路子就给否了。

        接下来想的是，通过打印插件来搞，比如lodop啥的，忙活了一两个小时，发现，这东西确实是好东西，但是以事业单位的客户的电脑系统版本的混乱程度以及对电脑的使用程度，让他们配合安装一个插件，还得确保插件功能不出问题，想想都不太实际。

        于是插件这条路，也挂了。

        一遍苦思冥想，一遍查资料，既要不用插件，又要保证打印出来，效果尽可能与预览窗口一样。想来想去，还有一条路可以试试，就是将预览窗口的DOM元素，转成高清图片，然后用img标签显示这个高清图片，最后把这个高清图片给打印出来。

        试了一下，确实可行，666~~~

        1、安装  html2canvas 

        将DOM元素转成图片，我用的是 html2canvas，在线安装方式有这么几种：

        方式1：npm install --save html2canvas
        方式2：yarn add html2canvas

        不过有的开发环境是不能连接互联网的，比如一些事业单位、政府单位啥的，可以自行下载html2canvas.js或者压缩版本html2canvas.min.js，然后直接script方式引入到需要使用这个js库的html文件中。

        这里我提供一个安装包，直接放到前端项目工程的node_modules文件夹里，使用html2canvas时，引用一下........./node_modules/html2canvas/dist/html2canvas即可。

传送门 >>  html2canvas，无需命令安装，直接拷贝引用即可

        2、相应的DOM元素转图片，并打印

        先上菜鸡代码。。。我给弄成组件了，比较关键的代码片段如下：

let boxObj=document.getElementById(nextProps.data.targetAreaID)//targetAreaID，预览DOC文档DIV容器的ID
          if(boxObj){
            const that=this
            html2canvas(boxObj,{scale:3}).then(function(canvas){//将目标DOM区域（targetAreaID）转为高清图片，并将高清图片显示在printerID里用于打印
              const imgURL=canvas.toDataURL()
              // console.log('imgURL=',imgURL)
              that.setState({printImgURL:imgURL},()=>{
                setTimeout(() => {
                  //将显示出来的高清图片，进行打印
                  let docPreviewObj=document.getElementById(nextProps.data.printerID)
                  if(docPreviewObj){
                    let printWinTmp=window.open("","_blank","height=700,width=1300,top=200,left=300")
                    printWinTmp.document.write(docPreviewObj.innerHTML)
                    printWinTmp.document.close()
                    printWinTmp.print()
                    printWinTmp.close()
                  }
                }, 500);
                setTimeout(() => {
                  that.setState({printImgURL:''})
                  nextProps.data.setIsReadToPrint(false)
                }, 2000);
              })
            })
          }

        targetAreaID，是预览DOC文档DIV容器的ID。

        printerID，是盛放转出来的高清图片IMG标签的DIV的ID。

        canvas.toDataURL()拿到的图片是base64的，所以可以用img来显示。

        另外，html2canvas(boxObj,{scale:3})里的scale数值设置的越大，图片就越清晰，但是生成的时间就会越长，具体设置多少，根据自己的需求效果定。

        最后，成功调出了浏览器的打印服务，完结撒花~~~