Print 前端打印 (调用 windows 自带打印功能,打印指定 dom 元素内容)

Print 前端打印 (调用 windows 自带打印功能,打印指定 dom 元素内容)

打印相关方法

纯 js 手写打印方法@雨季的泪

window.print 打印自带页眉页脚

window.print 打印自带页眉页脚，用于存放打印 url，日期时间，页面名称等内容

/* 屏蔽页眉页脚 等自带样式 */
@page {margin: 0;//控制是使用a4还是使用其它纸张规格size: auto;
}/* 如果只屏蔽页脚 */
@page {margin-bottom: 0;
}

print.js 方法封装

export default function printHtml(html) {const style = getStyle();const 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() {const styleContent = `#print-container {display: none
}
@media print {body > :not(.print-container) {display: none}html,body {display: block !important;}#print-container {display: block}@page {margin: 0mm;}
}`;const style = document.createElement("style");style.innerHTML = styleContent;return style;
}// 清空打印内容
function cleanPrint() {const div = document.getElementById("print-container");if (div) {document.querySelector("body").removeChild(div);}
}// 新建DOM，将需要打印的内容填充到DOM
function getContainer(html) {cleanPrint();const 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);});});
}

使用方法：

// 在需要打印的页面引入
import printHtml from '@/utils/print.js'// 调用方法
onPrint() {const printData = document.getElementById('printcontent').innerHTML // 需要打印的DOM元素printHtml(printData) // 将需要打印的DOM元素传入方法中
},

Print.js 案例解释

vue2 项目,复制代码即可看见效果

<template><div class="container"><el-button type="text" @click="printHandler">打印预览</el-button><el-tableclass="tableDom"ref="tableRef":data="tableData"style="width: 100%"border><el-table-column type="selection" width="55"> </el-table-column><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="sex" label="性别" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table><div style="background: tomato; width: 100%" class="printDom"><h1>hello world</h1><img :src="imageUrl" alt="" /></div></div>
</template><script>import domtoimage from "dom-to-image";import printHtml from "@/utils/print.js";export default {name: "Helloworld",mounted() {let tableDom = document.querySelector(".tableDom");//   将需要打印的DOM元素传入方法中(转成图片)this.domShot(tableDom);},data() {return {imageUrl: "",tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",sex: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-01",name: "王小虎",sex: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-01",name: "王小虎",sex: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-01",name: "王小虎",sex: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],};},methods: {printHandler() {// 获取要打印的Dom内容let newDomHtml = document.querySelector(".printDom").innerHTML;printHtml(newDomHtml);},//  将需要打印的Dom转成图片domShot(dom) {domtoimage.toPng(dom, { quality: 0.92 }).then((dataUrl) => {//保存图片this.imageUrl = dataUrl;});},},};
</script><style lang="scss" scoped>@page {margin: 10px;//控制是使用a4还是使用其它纸张规格size: auto;}
</style>

print-js

npm 官网文档

官方文档

安装

npm install print-js --save

使用

下面只演示 html 打印,其他打印方式请查看官方文档

<form method="post" action="#" id="printJS-form">...</form><button type="button" onclick="printJS('printJS-form', 'html')">Print Form
</button>

vue-print-nb

npm 官网文档

安装

npm install vue-print-nb --save

使用 (Vue2)

下面只演示 html 打印,其他打印方式请查看 npm 官网文档

import Print from "vue-print-nb";
// Global instruction
Vue.use(Print);//or// Local instruction
import print from "vue-print-nb";directives: {print;
}

案例

<button v-print>Print the entire page</button><div id="printMe" style="background:red;"><p>葫芦娃，葫芦娃</p><p>一根藤上七朵花</p><p>小小树藤是我家 啦啦啦啦</p><p>叮当当咚咚当当　浇不大</p><p>叮当当咚咚当当 是我家</p><p>啦啦啦啦</p><p>...</p>
</div><button v-print="'#printMe'">Print local range</button>

vue-print-nb-jeecg

安装

npm install vue-print-nb-jeecg --save

注册

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

使用

<button v-print>Print the entire page</button><div id="printMe" style="background:red;"><p>葫芦娃，葫芦娃</p><p>一根藤上七朵花</p><p>小小树藤是我家 啦啦啦啦</p><p>叮当当咚咚当当　浇不大</p><p>叮当当咚咚当当 是我家</p><p>啦啦啦啦</p><p>...</p>
</div><button v-print="'#printMe'">Print local range</button>