Print 前端打印 (调用 windows 自带打印功能,打印指定 dom 元素内容)
打印相关方法
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-table class="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 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 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>
文章评论