Question

我正在创建一个网页，并且需要创建一个按钮来打印所选区域。经过几次搜索，一切都导致我实现了html2canvas。我安装了在命令提示符下 npm安装html2canvas 。他们在html2canvas官方网站上提到 从“ html2canvas”导入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>

问题是当我单击按钮时，没有打开用于打印的窗口。该按钮确定有效，因为我收到了警报窗口。我想让它起作用吗？可以是安装程序吗？可以是不好的属性实现吗？

Answer 1

正在工作的小提琴：fiddle。

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

这是工作功能，您所需要做的就是在您的网站页面上点击该功能，然后将YOUR_ELEMENT 更改为容器的ID（#row in你这样）。

from scrapy.utils.project import get_project_settings
self.settings = get_project_settings()

Answer 2

首先请确保您正确包含了脚本文件。应该有一个<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.root.myapplication"> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-feature android:name="android.hardware.camera" /> <application android:allowBackup="true" android:icon="@drawable/tech" android:label="@string/app_name" android:roundIcon="@drawable/tech" android:supportsRtl="true" android:theme="@style/AppTheme.Launcher"> <activity android:name=".MainActivity" android:label="@string/app_name" android:theme="@style/AppTheme.Launcher"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>标记，其中包含库的Web兼容版本。大多数使用<script>的指令； npm install ...假设您使用的是诸如webpack或汇总之类的Web捆绑程序来制作单个捆绑的JavaScript文件，或者正在使用新的es6模块导入器。那看起来不像你在这里做什么。

相反，您可以包括html2canvas的预构建版本，例如https://html2canvas.hertzen.com/dist/html2canvas.js或https://unpkg.com/html2canvas@1.0.0-alpha.12/dist/html2canvas.js中的版本。

import ...

您可以在此处看到一个有效的示例：http://jsfiddle.net/u8Lz32k0/7/

Answer 3

您是否已将脚本加载到网页中？您可以将显示所有导入的HTML文件的开头张贴在其中吗？

从网页打印屏幕截图

3 个答案: