从网页打印屏幕截图答案

【问题标题】：Print a screenshot from web page从网页打印屏幕截图
【发布时间】：2018-08-14 06:23:02
【问题描述】：

我正在创建一个网页，我需要制作一个打印选定区域的按钮。经过几次搜索，一切都让我实现了html2canvas。我安装了它 npm install html2canvas 在命令提示符下。在他们提到的官方 html2canvas 网站中 import html2canvas from '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>

问题是当我单击按钮时，没有打开打印窗口。该按钮肯定有效，因为我得到了警报窗口。我缺少什么让这个工作？可以出一个安装程序吗？可以是坏属性实现吗？

【问题讨论】：

我想问题只是没有加载 html2canvas 库。 npm install 会将其安装在 node_modules 中，并且在大多数情况下位于您的文档根目录 (wwwroot) 之外。您应该检查您的浏览器调试控制台是否有错误。

标签： javascript jquery html2canvas

【解决方案1】：

首先确保您正确包含脚本文件。应该有一个 <script> 标记，其中包含您的库的 Web 兼容版本。大多数使用npm install ...的指令； import ... 假设您正在使用 webpack 或 rollup 之类的 web 捆绑器来制作单个捆绑的 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/

【讨论】：

您的工作示例看起来非常干净清晰，我会使用它！请再给我一盏灯，为什么除了日期什么都没有打印？
它应该是打印文档，您可以在其中添加更多内容。对我来说，它也打印文本。如果它不起作用，将 printWindow.print() 包装在 setTimeout 中可能会起到作用，就像在这个更新的小提琴中一样：jsfiddle.net/u8Lz32k0/7
是啊，好多了！
我得到的唯一问题是在打印页面中输入所有网页并且一些颜色发生变化
@AhmadKarim，它似乎仍然对我有用——如果你仍然看不到它，请告诉我

【解决方案2】：

工作小提琴：fiddle.

我建议您打开一个新的 html 页面，其中包含您要打印的元素，以及一个“打印此页面”按钮，如下例所示。一旦用户点击该按钮，浏览器的打印页面就会打开。

这是工作函数，您只需从您的网站页面在点击时调用此函数，然后将 YOUR_ELEMENT 更改为您的容器 ID（#row in你的情况）。

<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>

【讨论】：

非常感谢，但我不明白...我按照你告诉我的做了，除了我为确保按钮工作而添加的警报窗口之外，什么也没有发生。我使用 html2canvas 的主要原因是因为当我执行 cntl+p 时，它会扭曲页面的结构。你建议我怎么做？
@RaphClc 您是否尝试编辑我随附的小提琴以满足您的需求（例如添加图像）？我提供的解决方案主要用于捕获诸如文本之类的信息，也许还有一些图像，因为您可以在 PrintWindow.document.write() 中包含

【解决方案3】：

您是否在网页中加载了脚本？您可以在显示所有导入的地方发布您的 HTML 文件的开头吗？

【讨论】：

如果你问问题，把它放在 cmets 中。
没有足够的声誉我无法发表评论，但是这个问题对于解决提问者的问题是必要的