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>