window.print() 前端实现打印

香煎三文鱼

已于 2022-05-07 16:55:38 修改

阅读量937

点赞数

分类专栏： jQuery、js、css VUE 文章标签： window.print

于 2022-05-07 09:14:09 首次发布

本文链接：https://blog.csdn.net/qq_39569480/article/details/124623437

版权

jQuery、js、css 同时被 2 个专栏收录

14 篇文章 2 订阅

订阅专栏

VUE

11 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在JavaScript中利用window.print()函数实现在浏览器中打印当前页面内容。该方法具有良好的兼容性，但其局限性在于只能识别内联样式，不支持行内样式和外部样式。文中还封装了一个print.js文件，包含获取打印样式、创建打印容器、图片加载完成后的打印操作等步骤。此外，提供了一个实用的方法来清除打印内容。整个流程适用于需要完整打印当前页面的场景。

摘要由CSDN通过智能技术生成

通过在javascript代码中调用window.print()函数实现，浏览器会自动获取当前页面内容，并打开浏览器的打印预览页面。

使用场景：刚好当前页面的全部内容需要打印。

优点：兼容性好

缺点：适用场景狭窄；仅能识别内联样式，无法识别行内样式和外部样式

封装打印方法

在util下创建print.js文件

export default function printHtml(html) {
    let style = getStyle();
    let container = getContainer(html);
   
    document.body.appendChild(style);
    document.body.appendChild(container);
   
    getLoadPromise(container).then(() => {
      window.print();
      document.body.removeChild(style);
      document.body.removeChild(container);
    });
  }
   
  // 设置打印样式
  function getStyle() {
  let styleContent = `#print-container {
      display: none;
  }
  @media print { 
      body > :not(.print-container) {
          display: none;
      }
      html,
      body {
          display: block !important;
          /*上右下左 页面边距*/
          margin: 0.5cm 0cm 1cm 0cm;
      }
      #print-container {
          display: block;
      }, 
  }`;
    let style = document.createElement("style");
    style.innerHTML = styleContent;
    return style;
  }
   
  // 清空打印内容
  function cleanPrint() {
    let div = document.getElementById('print-container')
    if (!!div) {
      document.querySelector('body').removeChild(div)
    }
  }
   
  // 新建DOM，将需要打印的内容填充到DOM
  function getContainer(html) {
    cleanPrint()
    let container = document.createElement("div");
    container.setAttribute("id", "print-container");
    container.innerHTML = html;
    return container;
  }
   
  // 图片完全加载后再调用打印方法
  function getLoadPromise(dom) {
    let imgs = dom.querySelectorAll("img");
    imgs = [].slice.call(imgs);
   
    if (imgs.length === 0) {
      return Promise.resolve();
    }
   
    let finishedCount = 0;
    return new Promise(resolve => {
      function check() {
        finishedCount++;
        if (finishedCount === imgs.length) {
          resolve();
        }
      }
      imgs.forEach(img => {
        img.addEventListener("load", check);
        img.addEventListener("error", check);
      })
    });
  }

引入封装的print打印方法，传入需要打印的DOM元素

import print from "@/util/print.js"
 
export default {
  methods: {
    print() {
      //let printData = `<div>打印内容</div>`;
      //获取要打印的网页
      let printData = document.getElementById("printContent").innerHTML;
      printHtml(printData)
    }
  },
}