浏览器打印功能print.js

最新推荐文章于 2025-03-13 11:45:54 发布

伏见伊奈里

最新推荐文章于 2025-03-13 11:45:54 发布

阅读量7.6k

点赞数

分类专栏： JavaScript 文章标签： javascript js打印浏览器打印打印预览

本文链接：https://blog.csdn.net/qq_35313994/article/details/109197247

版权

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

博客讨论了在前端实现打印功能时遇到的问题，对比了手动创建iframe和使用print.js、vue-print-nb插件的优缺点。手动创建iframe在处理复杂内容时样式丢失，而vue-print-nb在打印多背景图片和大量内容时也存在样式问题。print.js被选中是因为它能更好地处理复杂的HTML打印任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件文档：https://printjs.com/

npm文档： https://www.npmjs.com/package/print-js

npm install print-js --save

在需要打印功能的组建中

 import print from 'print-js'

通用写法:

<div id="printContent"> 打印这些html</div>
<button  @click="openPrint()">点击打印</button>

openPrint(){
    printJS({
        printable: 'printContent',// // 文档来源：pdf或图像的url，html元素的id或json数据的对象
        type: 'json', // 可打印的类型。可用的打印选项包括：pdf，html，图像，json和raw-html。
        targetStyles: ['*'] // 库在打印HTML元素时处理任何样式
      })
}

为什么选择print.js

1.刚开始写打印功能的时候，先百度一下。找了一些单纯的js写法来实现：

手动创建一个iframe，打印这个iframe的内容

openPrint(){
//判断iframe是否存在，不存在则创建iframe
    var iframe=document.getElementById("printContent");
    if(!iframe){  
            var el = document.getElementById("printcontent");
            iframe = document.createElement('IFRAME');
            var doc = null;
            iframe.setAttribute("id", "print-iframe");
            iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-999em;top:-500px;');
//left负值不会出现横向滚动条
            document.body.appendChild(iframe);
            doc = iframe.contentWindow.document;
            //这里可以自定义样式
            //doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
            doc.write('<div>' + el.innerHTML + '</div>');
            doc.close();
            iframe.contentWindow.focus();            
    }
    iframe.contentWindow.print();
    if (navigator.userAgent.indexOf("MSIE") > 0){
        document.body.removeChild(iframe);
    }
}

问题：当打印机构复杂的包含图片、文字、表情的html，会有部分样式丢失。

于是开始考虑找打印插件

2.首先以vue为前提找到了vue-print-nb

npm文档：https://www.npmjs.com/package/vue-print-nb

npm install vue-print-nb --save

在main.js中引入

import Print from 'vue-print-nb'
 
Vue.use(Print);

之后在组件写打印某些内容的时候可以直接写

<div id="printContent"> 打印这些html</div>
<button  v-print="#printContent">点击打印</button>

或者

<div id="printContent"> 打印这些html</div>
<button  v-print="openPrint">点击打印</button>

export default {
    data() {
        return {
            openPrint: {
              id: "printContent",
              popTitle: '打印的标题',
              extraCss: 'https://www.google.com,https://www.google.com',
              extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
            }
        };
    }
}

问题：