调用浏览器导出PDF

  • 控制指定区域打印
  • 打印完成后，恢复原有页面
  • 打印内容完整清楚
    1.  onPrint () {
    2.     const prnhtml = window.document.getElementById('form-page').innerHTML //捕获只需要打印的内容
    3.     const oldHtml = window.document.body.innerHTML // 缓存当前页面中的所有页面内容
    4.     window.document.body.innerHTML = prnhtml // 把需要打印的指定内容赋给body.innerHTML
    5.     window.print() // 调用浏览器的打印功能打印指定区域
    6.     window.document.body.innerHTML = oldHtml // 替换当前页面中的所有页面内容
    7.     return false
    8.   }
    设置初始默认页边距，去除页码，页尾信息
    1. @page {
    2. size: auto;
    3. margin: 0mm;
    4. }

    优化

    复制了页面的DOM同时，没有同步监听事件，导致第二次点击打印功能无效
    1. onPrint () {
    2.     const prnhtml = window.document.getElementById('form-page').innerHTML
    3.     // const oldHtml = window.document.body.innerHTML
    4.     window.document.body.innerHTML = prnhtml // 把需要打印的指定内容赋给body.innerHTML
    5.     window.document.body.style.padding = '20px 30px'
    6.     window.print() // 调用浏览器的打印功能打印指定区域
    7.     // window.document.body.innerHTML = oldHtml //处理移除所有事件监听，点击事件失效问题
    8.     window.location.reload() //处理点击事件失效问题
    9.     return false
    10.   }

    导出为图片

    https://www.npmjs.com/package/dom-to-image-more
  1.   import domtoimage from "dom-to-image-more";
  2. function downLoad() {
  3. var node = document.getElementById("dom-to-img");
  4. domtoimage
  5.   .toJpeg(node)
  6.   .then(function (dataUrl) {
  7.    var link = document.createElement("a");
  8.     link.download = "my-image-name.jpeg";
  9.     link.href = dataUrl;
  10.     link.click();
  11.   })
  12.   .catch(function (error) {
  13.     console.error("oops, something went wrong!", error);
  14.   });
  15. }