将前端页面转换成图片,打印

注意​​​​1.iframe+window

使用window.print内置api对dom元素进行打印

2.vue-print-nb

使用该插件通过指令的形式对绑定的元素进行打印

注意：如果对于有内置样式的组件就不好处理了，尤其是table标签生成的表单（类似下面），或者ui组件库中的东西

3.将目标区域变成一张图片，然后在打印（推荐）

import html2canvas from 'html2canvas'
import print from 'print-js'

    printImage(){
      html2canvas(document.getElementById("printId")).then(canvas =>{
        let printURL = canvas.toDataURL('image/png',1);
        const style = '@page{margin:0.5mm}';
        print({
          printable:printURL,
          type:'image',
          base64:true,
          style,
          documentTitle:'',
          repeatTableHeader:false,
        })
      })
  },

 注意

1.给img标签加上crossOrigin="anonymous"属性

2. 服务端开启跨域，必须加上字段：response.setHeader("Access-Control-Allow-Origin","*");

3.并且开启CORS

html2canvas(domNode as HTMLElement, {
      useCORS: true,
      backgroundColor: null,
      scale: 1.5,
      width: 340,
      height: dom === 'wxewm' ? 480 : 401,
    }).then((canvas) => {
      const imgUrl = canvas.toDataURL('image/png', 1.0).replace('image/png', 'image/octet-stream');
      })