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

本文介绍: 不安装各种插件，使用 html2canvas转DOM为高清图片，实现文档网页打印

头两天客户提了一个需求，原来某个业务流程的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 即可。

传送门 &g t;> 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);
              })
            })
          }