从网页打印截图
我正在创建一个网页，我需要制作一个按钮，以打印选定的区域。经过几次搜索，一切都导致我实现了html2canvas。我在命令提示符中用npm html2canvas安装了它。在官方的html2canvas网站上，他们提到了从‘html2画布’导入html2canvas；，我认为需要添加到aspx文件的顶部(？)到目前为止，我已经对这个代码部分进行了编码：
function getScreenshot() {
alert("bob");
html2canvas(document.body, {
onrendered: function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
$('#test').html('<img src="' + canvasImg + '" alt="">');
}
});
var printContent = document.getElementById("row");
var printWindow = window.open("", "");
printWindow.document.write(printContent.innerHTML);
printWindow.document.write("<script src=\'http://code.jquery.com/jquery-1.10.1.min.js\'><\/script>");
printWindow.document.write("<script>$(window).load(function(){ print(); close(); });<\/script>");
printWindow.document.close();
};<div id="test" class="body-content animated fadeIn">
<a href="javascript:getScreenshot()">
<img src="Images/printer.png" width="40" height="40" align="right">
</a>
</div>
问题是，当我单击按钮时，没有打开打印窗口。该按钮可以正常工作，因为我得到了警报窗口。我错过了什么才能让它发挥作用？可以是一个安装过程吗？会不会是不好的属性实现？
回答 3
Stack Overflow用户
发布于 2018-08-13 17:19:59
首先，确保正确地包含了脚本文件。应该有一个<script>标记，其中包含与web兼容的库版本。大多数使用npm install ...；import ...的说明假设您使用的是像webpack这样的web绑定器或rollup来生成单个捆绑的JavaScript文件，或者使用新的es6模块导入程序。这看起来不像你在这里做的事。
相反，您可以包含html2canvas的预构建版本，比如https://html2canvas.hertzen.com/dist/html2canvas.js或https://unpkg.com/html2canvas@1.0.0-alpha.12/dist/html2canvas.js。
<script src="https://unpkg.com/html2canvas@1.0.0-alpha.12/dist/html2canvas.js"></script>您可以在这里看到一个有用的示例：http://jsfiddle.net/u8Lz32k0/7/
Stack Overflow用户
发布于 2018-08-13 16:59:46
工作小提琴：小提琴。
我建议打开一个新的html页面，其中包含要打印的元素，以及一个按钮“打印此页面”，如下面的示例所示。一旦用户单击该按钮，浏览器的打印页面就会打开。
这是一个工作函数，您所需要做的就是从您的网站页面单击调用这个函数，将YOUR_ELEMENT更改为容器的id (在您的情况下为#row)。
<script type="text/javascript">
function OpenPrintPage() {
var OriginalContent = document.getElementById('YOUR_ELEMENT').innerHTML;
var PrintWindow = window.open("","PrinterFriendlyPage","scrollbars=yes,status=yes,toolbar=yes,menubar=yes,resizable=yes,height=510,width=750");
PrintWindow.document.write( '<html><head><title>' + document.title +'</title></head><body><div id="' + 'content' + '">' + '</div><a class="printbtn" href="javascript:window.print()">Print This Page</a> </body></html>');
PrintWindow.document.close();
PrintWindow.document.getElementById('content').innerHTML += OriginalContent;
}
</script>
Stack Overflow用户
发布于 2018-08-13 17:01:35
你把脚本加载到网页上了吗？您可以在HTML文件的开头发布显示所有导入的内容吗？
https://stackoverflow.com/questions/51827071
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号