不带预览的打印表
不带预览的打印表
提问于 2020-01-07 10:14:53
您好，朋友们，我正在使用vue.js创建一个表，我想要一个按钮来打印表中的数据而不是预览对话框，那么我应该如何用vue编写我的javasript代码呢？这是我的表格：
这是我的打印按钮代码
Print: function(){
var mycocument=document.getElementById('table_users');
var newWin=window.open("","");
newWin.document.open();
newWin.document.write(mycocument.outerHTML);
newWin.print();
newWin.close();
}回答 2
Stack Overflow用户
发布于 2020-01-07 10:56:39
选项1
你可以试着这样做。
function printDiv() {
var divContents = document.getElementById("table_users").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body > <h1>This is a sample print</h1> <br>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
} 您可以查看此示例https://codepen.io/misterjenuel/pen/OJPzqVL
选项2
您可以使用https://github.com/MrRio/jsPDF来完成此操作。
*html*
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<table border="1px" style="border-collapse: collapse;">
<tr>
<td>computer</td>
<td>Algorithm</td>
</tr>
<tr>
<td>Microwave</td>
<td>Infrared</td>
</tr>
</table>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>*JavaScript：*
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});选项3
内容在一个....可以下载为pdf格式，使用jspdf & html2canvas格式。
您需要引用这两个js库，
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>然后调用下面的函数，
//Create PDf from HTML...
function CreatePDFfromHTML() {
var HTML_Width = $(".html-content").width();
var HTML_Height = $(".html-content").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width + (top_left_margin * 2);
var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
html2canvas($(".html-content")[0]).then(function (canvas) {
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
}
pdf.save("Your_PDF_Name.pdf");
$(".html-content").hide();
});
}Stack Overflow用户
发布于 2020-01-07 11:24:08
，但如果您尝试直接打印它：
为此，我遇到了另一个优雅的解决方案：
将可打印的部分放在一个带有如下id的div中：
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />现在让我们创建一个非常简单的javascript：
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59621352
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号