前端实现打印功能的两种方法详解

更新时间：2023年01月06日 09:53:57 作者：赵十三·光

当页面设计好后需要打印出来,如网页的的打印浏览和打印功能,有些公司需要让前端开发好页面打印出来或者转为pdf格式的文档,下面这篇文章主要给大家介绍了关于前端实现打印功能的两种方法,需要的朋友可以参考下

前言

前端实现打印功能的方法有很多，大家在网上随便一搜就是一大堆，在这里，我主要选择一个我觉得比较好一点的实现方式来进行解释描述：

方法一：window.print()

这个命令默认打印整个页面的内容，所以，如果想要实现局部打印功能的话，就要重新给body赋值，并且后续执行完之后再还原回去，这样的话会造成一些非预期的结果，很麻烦，并且在当前也操作，window.document.body的内容重新渲染，打印完会有刷新，影响用户的体验，所以不推荐，但还是简单介绍一下：

//（1）首先获得元素的html内容（这里建议如果有样式最好是用内联样式的方式）
var newstr = document.getElementById(myDiv).innerHTML;//得到需要打印的元素HTML
 
//（2）保存当前页面的整个html，因为window.print()打印操作是打印当前页的所有内容，所以先将当前页面保存起来，之后便于恢复。
var oldstr = document.body.innerHTML;//保存当前页面的HTML
 
//（3）把当前页面替换为打印内容HTML
document.body.innerHTML = newstr;
 
//（4）执行打印操作
window.print();
 
//（5）还原当前页面
document.body.innerHTML = oldstr;

方法二：利用iframe,iframe.contentWindow.print()

这个与方法一的区别就是，取消打印后可以完整保留当前访问页面的内容，不需要影响原页面，需要注意的是，在你生成新的iframe内的html时，样式可能会有影响，加载不完全(全局样式特别)，需要单独引入一些你自己的样式，我比较推荐这个，所以来重点说明一下：

// 1、获取需要打印的部分
const  printArea =  this.getElementById(document.body,"rx-form-container");
 
// 2、引入打印的专有CSS样式
var strStyleCSS="<link href='/rxform.css' type='text/css' rel='stylesheet'>";
var antdesignCSS="<link href='/antdesign.css' type='text/css' rel='stylesheet'>";
let printCSS=" <link href='/print.css' type='text/css'  rel='stylesheet'> ";
 
// 3、拼接字符串
var strFormHtml=strStyleCSS  +antdesignCSS + printCSS+"<body>"+domEl.innerHTML+"</body>";
 
// 4、创建 iframe 标签
var iframe = document.createElement('IFRAME');
var doc = null;
iframe.setAttribute('style','position:absolute;width:0;height:0;left:-500px;top:-500px;');
 
// 5、浏览器插入 iframe
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
// 引入打印的专有CSS样式
// doc.write("<LINK rel='stylesheet' type='text/css' href='/print.css'>");
doc.write(printHTML);
doc.close();
iframe.contentWindow.focus();
 
// 注意：等待加载完调用打印，否则样式外联css显示有问题
iframe.contentWindow.addEventListener('load', function() {
    // 6、开始打印
    iframe.contentWindow.print();
    // 7、删除iframe
    document.body.removeChild(iframe);
})

这样写虽然不会影响原页面，但是需要我们把打印的内容及样式用JS来生成，如果打印的内容很多，或者样式很复杂的话，那就是一个大工程，难免不方便，所以如何解决问题呢？我在查度娘的时候，发现了一种方式：将要打印的内容生成一个图片然后放在iframe中，利用html2canvas 生成截图，但是我并未校验（因为本人项目主要是打印表单流程，没有很复杂，嘻嘻），所以，这里我就简单复制一下大佬的，最后也放置了链接，如果有需要也可以去大佬博客看看：

    // 打印账单
    printBill () {
      this.printDisabled = true  // 点击打印按钮禁止重复点击
      setTimeout(_ => {      // 按钮显示为禁止了再去执行截图功能
        html2canvas(this.$refs.reconciliationWrapper, {
          backgroundColor: null,
          scale: 1.3
        }).then((canvas) => {
          let dataURL = canvas.toDataURL('image/png')
          this.$refs.iframe.contentWindow.document.body.innerHTML = ''  // 清空上一次打印的内容
          this.$refs.iframe.contentWindow.document.write('<html><head><style media="print">@page { margin: 0mm 10mm; }body{margin-top: 50px; text-align: center;}</style></head><body><img src=' + dataURL + '></body></html>')
          setTimeout(_ => {
            this.$refs.iframe.contentWindow.print()
          }, 0)
          this.printDisabled = false
        })
      }, 100)
    }

然后将截图放在iframe中的img打印，截图一般会有些模糊，调整html2canvas的参数scale，放大缩小的比例，要根据实际情况调整。

补充：导出步骤

1：引入html2Canvas 和 JsPDF

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

2：实现导出

export() {
    var printDom = document.getElementById('print');//获取打印的节点
    let opts: any = {
      useCORS: true, // 表示允许跨越的图片；allowTaint: true和useCORS: true选择一个
      // windowHeight: modal.scrollHeight + 24 + 100,//获取y方向页面包含滚动条的高度，24和100为padding,margin
      // width: dom.offsetWidth + 48,//48为padding值
      // height: dom.clientHeight + 400,//可见高度+padding+margin
      // y: window.pageYOffset + 100,//滚动条高度修复
      // scrollX: 17,
      scale: 1
    };
    //html2Canvas的作用是根据dom生成屏幕截图
    html2Canvas(printDom, opts).then(canvas => {
      let contentWidth = canvas.width;
      let contentHeight = canvas.height;
      let pageHeight = contentWidth / 592.28 * 841.89;
      let leftHeight = contentHeight;
      let position = 0;
      let imgWidth = 595.28;
      let imgHeight = 592.28 / contentWidth * contentHeight;
      let pageData = canvas.toDataURL('image/jpeg', 1.0);
      // landscape表示横向,portrait表示纵向
      let PDF = new JsPDF('portrait', 'pt', 'a4');//纵向
      if (leftHeight < pageHeight) {
        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          if (leftHeight > 0) {
            PDF.addPage();
          }
        }
      }
      PDF.save(`导出内容.pdf`);
    })
  }

总结：

打印的方式很多，大家选择适合自己项目的即可。就像王者荣耀，哈哈哈（肯定会有人突然疑惑，为什么会突然提到游戏，因为前两天我肯开心自己粉丝在增加，但是感觉自己博客不怎么生动，同事就给了我一个建议，可以说说王者荣耀，嘻嘻嘻，第一次说，以后不一定啥时候说），所以最后总结只有第一句话有用，后边大家随便看看就行，代码机器们，加油，在努力个四五十年，马上就可以退休了！！！

到此这篇关于前端实现打印功能的文章就介绍到这了,更多相关前端实现打印功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS实现深拷贝和浅拷贝的方式详解
深拷贝和浅拷贝是面试中经常出现的,主要考察对基本类型和引用类型的理解深度,本文主要给大家介绍了js实现深拷贝和浅拷贝的方式,需要的朋友可以参考下
2022-05-05
JavaScript 删除数组元素的方法
本文主要介绍了JavaScript 删除数组元素的方法，包括操作方法改变了原数组和操作方法不改变原数组，具有一定的参考价值，感兴趣的可以了解一下
2024-02-02
微信小程序实战之顶部导航栏(选项卡)(1)
这篇文章主要为大家详细介绍了微信小程序实战之顶部导航栏的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
关于ES6的六个小特性（二）
ES6提供了大量新的好的东西，在过去的一年内，浏览器提供商做了大量的辛勤工作将新的语言特性更新到他们的浏览器中。尽管有重大的更新，很多小的语言更新另我眼前一亮，下面这篇文章主要介绍了关于ES6的六个小特性,需要的朋友可以参考下。
2017-02-02
Javascript实现贪吃蛇小游戏（含详细注释）
这篇文章主要为大家详细介绍了Javascript实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
Bootstrap每天必学之简单入门
相信大家阅读了Bootstrap第一篇文章后，对Bootstrap充满了探索欲望，小编也对Bootstrap产生了兴趣，所以今天再整理一篇关于Bootstrap的入门介绍，希望大家喜欢。
2015-11-11
小议Function.apply() 之一------(函数的劫持与对象的复制)
小议Function.apply() 之一------(函数的劫持与对象的复制)...
2006-11-11
小程序采集录音并上传到后台
这篇文章主要为大家详细介绍了小程序采集录音并上传到后台，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
JavaScript自定义Webpack配置实现流程介绍
本系列主要整理前端面试中需要掌握的知识点。本节介绍webpack如何优化前端性能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-10-10
javascript表格的渲染组件
这篇文章主要介绍了javascript表格的渲染组件的相关资料,需要的朋友可以参考下
2015-07-07