如何在角度4中使用addHTML

2024-07-04

我试图在 Angular 中使用 jspdf 库的 addHTML 函数,并且已经安装了 html2Canvas 但出现错误。

这是我的 demo.component.ts 文件。

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as html2canvas from "html2canvas";

@Component({
 selector: 'app-demo',
 templateUrl: './demo.component.html',
 styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {
@ViewChild('content') content:ElementRef;

constructor() { }

ngOnInit() {}

download() {
console.log("vijay")
let doc = new jsPDF('p','pt','a4');

let specialElementHandlers = {
  '#editor': function (element, renderer) {
      return true;
  }
};


let content  = this.content.nativeElement.innerHTML;

// doc.fromHTML( content, 15, 15, {
//   'width': 200,
//   'elementHandlers': specialElementHandlers
// });

    doc.addHTML(document.getElementById('content'),function() {
         doc.save('web.pdf');
    });
   }
  }

这是我的 demo.component.html 文件。

<div #content>
<h2>HTML Table</h2>

    <table>
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
    <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
    </tr>
    </table>
</div>
<button (click)="download()" > Download </button>

当我点击下载按钮时,它会给我这个错误:

错误:您需要https://github.com/niklasvh/html2canvas https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js https://github.com/cburgmer/rasterizeHTML.js

我已经在 demo.component.ts 中导入了 html2canvas。 并尝试使用 formHTML 并且它有效,但我想专门使用 addHTML 函数或 html2canvas。

任何帮助将不胜感激。


只需尝试将以下 CDN URL 包含在您的index.html,(顺便说一下,无需将其导入到您的组件中)

https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js

希望这可以帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在角度4中使用addHTML 的相关文章

  • 有没有基于 Maven 的 HTML 验证器

    我有一个包含许多 HTML 文件的项目 作为 Maven 构建过程的一部分 我想在这些文件上运行验证器以确保 这些文件在语法上是正确的 例如检查所有开始标签是否都有相应的结束标签 文件符合编码指南 有人可以推荐一个好的验证器来做到这一点吗
  • 如何隐藏 html 表格中的多行(数千行)

    我有很多行的 html 页面 大约 40000 table tr td row 1 td tr tr td row 2 td tr tr td row 30000 td tr table 我需要一种快速的方法来隐藏 显示具有指定名称的行集
  • 导出/下载表 HTML-PHP 到 Excel 文件

    我有一个 HTML PHP 表格 可以从 mySQL 中提取数据 请看这里link https anakpanti com ab cargo controllers searchshipment 例如 请搜索此发货代码以获取表格内的结果 4
  • 在事件监听器函数中传递参数[重复]

    这个问题在这里已经有答案了 我想将参数传递给事件侦听器内部调用的函数 下面的代码显示了我想要做的事情 但它不允许我按照常规方式进行操作 有什么解决方法吗 HTML 代码
  • Angular 5 - 如何重定向到具有特定标头的外部 URL?

    这就是我试图用 Angular 实现的目标 this headers this http get urlApi subscribe data gt go to url with specific headers err gt console
  • Angular 2 模态弹出错误“表达式在检查后已更改”

    演示应用程序的 Github 存储库 https github com eddy80310 formBug 我有一个非常简单的应用程序 其中包含应用程序组件 子组件 帐户 处理消息对话框组件 弹出模式 的警报服务 为了演示目的 我有两种相同
  • 如何在没有 iframe 的情况下使用 Google 表单?

    几年前 我在互联网上发现如何在联系页面中使用 Google 表单 仅使用属性提交按钮操作中的查询而不使用 iframe 现在 我再也找不到了 没有 iframe 是否仍然可以使用 Google 表单 我刚刚找到了 function post
  • 如何用Python提取网页的某些部分

    目标网页 http www immi gov au skilled general skilled migration estimated allocation times htm http www immi gov au skilled
  • 是否必须定义

    使用按钮标签时 是否必须定义 type 属性 或者仅具有语义
  • 用随机图像填充表格

    首先 我的编码经验包括修改简单的脚本以在我的页面上工作 其次 我搜索并发现了几个类似的问题 但无法完全解决它们 我需要一些帮助来使用大约 40 张图像数组中的随机图像填充 3x3 表 我目前有一个使用 backgroundImage 属性的
  • 如何将angularjs变量值分配给html元素属性,例如输入elememnt的name属性

    我对 Angular 完全陌生 我有一个 AngularJS scope 变量 scope testme inputname 我想将此变量值分配给 html 元素的 name 属性 我想 结果如下
  • php curl 获取 html 和 js 渲染

    php curl 只获取html页面的源代码 不执行js脚本 我需要我的网站获取已执行所有 JavaScript 的源代码 我使用ajax 但无法在页面中添加更多js 因为当我加载另一个页面时脚本会保留 我找到了 SpiderMonkey
  • iPad html5 视频没有控件?

    这让我苦恼了一整天 但我不知道如何让 html5 视频播放器在没有本机控件的情况下工作 我不想要任何控件 但如果我不包含它们 视频似乎不想播放 即使我在下面添加一些 javascript 试图强制它播放 它也适用于 iPhone 和多个浏览
  • 为 Flutter Web 应用程序添加 id 或 name 属性或其他标识方式?

    在编写 Flutter Web 应用程序时 我尝试利用基于 Selenium 的 Web UI Testing 框架 遗憾的是 我无法通过 id 或 name 属性识别代表某个 flutter 小部件的 HTML 元素 HTML 文档中不存
  • 错误:“访问受限 URI 被拒绝”

    访问受限 URI 被拒绝 代码 1012 中断此错误 xhttp send null function getXML xml file if window XMLHttpRequest var xhttp new XMLHttpReques
  • Electron 应用程序与 Angular 2 重新加载问题[重复]

    这个问题在这里已经有答案了 我正在使用 Angular 2 开发 Electron 桌面应用程序 一切都启动得很好并且按预期工作 但是当我重新加载应用程序时它失败了 看来是路由的问题 如果没有路由 应用程序将很好地重新加载并显示所做的更改
  • 不固定高度的滚动div

    我需要构建一个动态调整大小的滚动 div div 应动态调整大小以适应屏幕 但如果内容不适合屏幕 它应该显示一个滚动条 因此浏览器自己的滚动条永远不需要激活 我可以通过在 div 中放置另一个 div 并使用来让滚动条出现在 div 中ov
  • 使页脚正确粘贴到页面底部[重复]

    这个问题在这里已经有答案了 我试图让我的页脚 只是一个带有一行文本的div 位于屏幕底部 如果内容没有一直到达底部 或者位于内容的底部 如果内容需要滚动条 如果内容不需要滚动条 它可以完美工作 但是当内容太长时 页脚仍然位于同一位置 位于内
  • 使用属性初始化 Angular 2 组件[重复]

    这个问题在这里已经有答案了 有没有办法将参数传递到 Angular 2 组件的根 我已经能够使用属于内部组件模板一部分的组件来执行此操作 但不能使用根组件来执行此操作
  • 如何在角度4中使用addHTML

    我试图在 Angular 中使用 jspdf 库的 addHTML 函数 并且已经安装了 html2Canvas 但出现错误 这是我的 demo component ts 文件 import Component OnInit ViewChi

随机推荐

  • 在实际应用或执行之前验证 yaml 中定义的 OpenShift 对象

    我在 template yaml 文件中有一个 OpenShift 模板 其中包括以下对象 部署配置 pod 服务和路由 我使用以下命令来执行 yaml oc process f template yml oc apply f 我想在实际应
  • 将 WebView 保存为 PDF 返回空白图像?

    我正在尝试弄清楚如何将 WebView 保存到 PDF 并且完全卡住了 真的很感激一些帮助吗 我在 OSX 上的 Cocoa 和 Swift 中执行此操作 这是到目前为止我的代码 import Cocoa import WebKit cla
  • 如何根据对象属性字符串过滤“ngFor”循环内的项目

    我需要过滤里面的项目ngFor循环 通过更改下拉列表中的类别 因此 当从列表中选择特定类别时 它应该只列出包含该相同类别的项目 HTML 模板
  • java中的长轮询

    我已经编写了用于长轮询的服务器端代码 我想用java写客户端程序 因此 根据长轮询 客户端发送一个由服务器帮助的请求 当事件发生时服务器响应该请求 然后客户端发送新的请求 所以我面临的麻烦是用java编写的客户端 发送请求后 如何继续检查客
  • JavaScript 开发人员不使用 Array.push() 是否有原因?

    我经常看到开发人员在 JavaScript 中使用如下所示的表达式 arr arr arr length Something arr arr length Another thing 不会push更合适吗 arr arr push Some
  • 通过 powershell 将调试器附加到多个进程

    我有几个正在运行的进程 我想通过 powershell 将它们附加到 VS 调试器 目前 我可以这样做 Get Process NServiceBus Host Debug Process 如果只有一个进程 系统会提示我选择正确的调试器 然
  • 谷歌模拟 - 我可以在同一个模拟对象上多次调用 EXPECT_CALL 吗?

    如果我打电话EXPECT CALL在同一个模拟对象上两次TEST F 会发生什么 期望是否附加到模拟对象中 或者第二次调用是否消除了第一次调用的效果 I found 后子句 https github com google googletes
  • 滚动后 ListView 未显示正确的值

    在我的应用程序中我使用的是CustomListView与ArrayAdapter显示不同国家的时间 但在 6 到 7 行之后 取决于手机屏幕尺寸 时间值会重复 根据之前的一些文章 我编写了以下代码片段来获得解决方案 但问题仍然存在 以下是我
  • 如何等待进程及其所有子进程退出?

    是否有一个等待方法 当目标进程及其所有子进程退出时会返回 看来 Process WaitForExit 只会等待目标进程 net 中有一个错误会给出您所追求的行为 WaitForExit 如果您异步读取输出 将等待所有子进程 p Start
  • vue js 2:访问已安装函数中的道具

    我的子组件中有数据道具 在已安装函数的子组件内部 我需要从 props 获取特定值并设置选择下拉值 我正在使用 vue multiselect 插件 工作正常 这是代码 module exports props Subscriptions
  • python easy_install:指定存放所需文件的目录

    我正在尝试使用 easy install 来安装 MySQL python 它几乎立即失败 mysql c 36 23 错误 my config h 没有这样的文件或目录 mysql c 38 19 错误 mysql h 没有这样的文件或目
  • Windows 窗体应用程序中异常处理的最佳实践?

    我目前正在编写我的第一个 Windows 窗体应用程序 我现在已经阅读了几本 C 书籍 因此对 C 必须处理异常的语言特性有了相对较好的了解 然而 它们都非常理论化 因此我还没有了解如何将基本概念转化为应用程序中良好的异常处理模型 有人愿意
  • 使用部署在 Tomcat 中的 Web 应用程序关闭 Tomcat

    我对我的 webapp 开发中遇到的 tomcat 操作有一些疑问 有什么办法可以从部署在tomcat中的web应用程序中关闭tomcat本身吗 tomcat 是否在一个 JVM 或单个 JVM 中运行其所有 webapps war 或者在
  • GHC 截断 Unicode 字符输出

    我无法让 GHCi 或 GHC 打印 unicode 代码点 221A 平方符号 我不认为这是我的外壳 因为我可以让 ruby 来做 irb gt puts u221A GHC GHCi 是另一个问题 ghci gt putStrLn 87
  • 使用深度名称向量作为索引替换嵌套列表

    采取一个简单的嵌套列表L L lt list lev1 list lev2 c bit1 bit2 other list yep 1 L lev1 lev1 lev2 1 bit1 bit2 other other yep 1 1 一个向量
  • 带图像背景的页面的 V 形部分

    I m trying to make a one page website But I would like something to diversify it from all other similar sites I came up
  • 在模拟器中实施应用内结算

    我一直在阅读有关 Android 应用程序的 实施应用内计费 的内容 并且文档说不可能在模拟器中测试该应用程序 真的吗 我正在开发的手机没有 移动数据计划 因此我尝试通过 USB 通过 PC 连接手机 但由于我的 PC 位于代理后面 因此我
  • 使用 M1 Mac 进行 Python 多处理

    我有一台 Mac Mac Os 11 1 Python Ver 3 8 2 需要在多处理中工作 但程序不起作用 import multiprocessing def func index int print index manager mu
  • JS:在调用文件中的每个其他函数之前调用某个函数

    我有一个关于在 JS 中更好地重用代码的问题 例如我有文件functions js具有以下功能 export const a gt export const b gt export const c gt const foo gt 我想在调用
  • 如何在角度4中使用addHTML

    我试图在 Angular 中使用 jspdf 库的 addHTML 函数 并且已经安装了 html2Canvas 但出现错误 这是我的 demo component ts 文件 import Component OnInit ViewChi