vue实现界面截图并导出Word html2canvas实现界面截图 file-save和html-docx-js-typescript，html导出Word

昨天遇到了一个业务问题，需要对界面进行截图并导出Word。我们是基于cesium做的，cesium的截图只能是对地球进行截图，不能全部界面进行截图。后来转用html2canvas。

废话不多说，看看最终是怎么实现的吧。

首先需要安装html2canvas;它可以将HTML内容写入Canvas生成图片；

npm install --save html2canvas

再安装html-docx-js-typescript 和file-saver

npm install html-docx-js-typescript --save-dev

npm install  file-saver  --save-dev

实现代码--------------------对界面进行截图并导出Word

import html2canvas from 'html2canvas'; 
import { asBlob } from 'html-docx-js-typescript' 
import { saveAs } from 'file-saver'
export default {
    methods: {  
        exportWord() {                                                                                                                                                            
            let that = this;                                                                                                                                                                                                      
            html2canvas(document.getElementById('app'), {                                                                                                                                                        
              backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）                                                                                     
              useCORS: true, //支持图片跨域                                                                                                                                                           
              scale: 1, //设置放大的倍数 
            }).then(canvas => {                                                                                                                                                                                                          
              let imgBase64 = canvas.toDataURL('image/jpeg');                                                                                                                                            
              const htmlString = `
                    
                    
                     
                       
                        
                            
                         
                        
Word标题
  
                        
  
                                
                        
 
                                    
                  `                                                                                                                                                                                                           
               console.log('htmlString', htmlString)                                                                                                                                                                   
               const opt = {                                                                                                                                                                                                                
                 orientation: 'landscape'                                                                                                                                                                               
               }                                                                                                                                                                                                                                      
               asBlob(htmlString,opt).then(data => {                                                                                                                                                                            
                   saveAs(data, 'file.docx') // save as docx file                                                                                                                                           
               })                                                                                                                                                                                                                 
            }); 
        }
    }                                                                                                                                                                                                    }

image

相关延伸 一个截图并下载图片的例子

npm install --save html2canvas
import html2canvas from 'html2canvas';
downloadFun() {
    html2canvas(document.getElementById('app'), {        //   app可以改成你想要生成图片的任意id，或者自己 可以换其他 元素                                  
      backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）                                                                                     
      useCORS: true, //支持图片跨域                                                                                                                                                                         
      scale: 1, //设置放大的倍数                                                                                                                                               
    }).then(canvas => {                                                                                                                                                                                                      
   console.log(canvas) //这里打印出来就是base64的图片                                                                         
   var alink = document.createElement("a");                                                                                                                         
   alink.href = canvas.toDataURL("image/png");                                                                        
   alink.download = "download.png";                                                                                                                                                                     
   alink.click();                                                                                                                                                                                                  
 }）

}

image

附上链接https://www.npmjs.com/package/html-docx-js-typescript

https://html2canvas.hertzen.com/

html-docx-js-typescript - npm

html2canvas - Screenshots with JavaScript