在vueJS上使用PrintJS打印页面节
在vueJS上使用PrintJS打印页面节
提问于 2021-01-25 21:39:06
我使用npm install print-js --save在我的vue项目中安装了printJS
Print Preview现在可以成功显示，但问题是它正在打印整个页面以及侧面板和滚动条。我像这样实现了它：
<template>
<b-modal>
<div id="print-form">
<table style="border-collapse: collapse; width: 100%" border="1px">
</table>
<button onclick="print()" class="btn btn-primary btn-block">Print</button>
</div>
</b-modal>
</template>
import * as Printjs from "print-js";
export default {
method: {
print() {
Printjs({
printable: "print-registration-form", //Id to print content
type: "HTML"
});
}
}
}当我单击print时，它将打印整个页面，而不是id指定的页面部分。有没有办法只打印特定的div内容？
回答 2
Stack Overflow用户
发布于 2021-01-28 04:16:42
看起来您使用了错误的id。你的意思是用print-form代替吗？
printJS({
printable: "print-form",
type: "HTML"
});Stack Overflow用户
发布于 2021-01-25 21:43:26
我可以向你提出这个解决方案：
@media print {
body * {
visibility: hidden;
}
#targetDiv, #targetDiv * {
visibility: visible; border: none;
}
} <!DOCTYPE html>
<html>
<body>
<h2>The window.print() Method</h2>
<div>
<p>Click the button to print the current page.</p>
</div>
<div id="targetDiv">
<p>Lorem ipsum kjng kq fev lnb fesl</p>
</div>
<button onclick="window.print()">Print this page</button>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65885900
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号