如何在角度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 的相关文章

  • 使用 store 和 http 使用 ngFor 进行无限循环

    我的代码有无限循环 模板
  • 有没有基于 Maven 的 HTML 验证器

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

    我想隐藏search当用户搜索某些内容时的图标 连我都想躲起来 保留图标和清除图标x就这样 问题如下图所示 NOTE 我想保持相同的差距search icon and Search text input type search width
  • 逻辑和物理 URL

    这个问题是我之前问题的延伸 此网络服务是否安静 https webmasters stackexchange com questions 49832 what qualifies as a rest web service尝试更好地理解 R
  • 粘性页眉和页脚可滚动内容

    我正在尝试创建一个包含三个 div 的页面 页眉 页脚和内容区域 这些应该占据 100 的屏幕 页眉和页脚很小并且不会改变 内容区域可以是任意大小 所以我添加了overflow auto当它变得太大时使其滚动 问题是 它溢出了屏幕的高度 我
  • Angular 2 模态弹出错误“表达式在检查后已更改”

    演示应用程序的 Github 存储库 https github com eddy80310 formBug 我有一个非常简单的应用程序 其中包含应用程序组件 子组件 帐户 处理消息对话框组件 弹出模式 的警报服务 为了演示目的 我有两种相同
  • HTML 中的 onBlur 和 onChange 属性有什么区别?

    何时叫一个人与另一个人比赛 是否存在 onChange 会被调用但 onBlur 不会被调用的情况 The onBlur当您离开对象但不一定更改其值时 会触发该事件 The onChange仅当您更改字段的值并且它失去焦点时才会调用事件 您
  • 如何在ionic 2中生成和显示QR码

    我找到了在 Angular 和 ionic 1 中生成条形码的文档 但我需要在 Ionic 2 项目中生成一个 尝试 JsBarcode 项目 有一个 Angular 1 的包装器 我使用了本期中的说明来让它在 Angular 2 上工作
  • 如何用Python提取网页的某些部分

    目标网页 http www immi gov au skilled general skilled migration estimated allocation times htm http www immi gov au skilled
  • 即使列不占据整个宽度,表格也会占据整个宽度

    我有一个像这样的 HTML 表格 table border collapse collapse table thead th nth child 1 width 180px table thead th nth child 2 width
  • 如何在 SASS 中定义动态 mixin 或函数名称?

    我想在 SASS 中动态创建 mixin 以列表中的每个项目命名 但它似乎不起作用 我尝试了这个 但出现错误 event icons fair concert art show conference dance show film part
  • php curl 获取 html 和 js 渲染

    php curl 只获取html页面的源代码 不执行js脚本 我需要我的网站获取已执行所有 JavaScript 的源代码 我使用ajax 但无法在页面中添加更多js 因为当我加载另一个页面时脚本会保留 我找到了 SpiderMonkey
  • Angular2 2.4.3 和响应式网页设计:使用媒体查询似乎不起作用

    当将 Angular2 2 4 3 与 CSS3 媒体查询功能结合使用时 直接嵌入到 Angular2 组件中 参见下面的示例 or 使用 styles css 在 index html 中集中引用 这两种情况下的 html 组件都没有根据
  • 两行标题的填充

    这有点难以解释 如果有人知道更好的标题 请继续更改它 我想在标题后面画一个黑框 我正在使用 h 标签内的跨度来执行此操作 它需要向左和向右一点填充 我的布局是响应式的 因此标题可能会分成两行 div class headline black
  • 如何在引导程序使用jquery中单击另一个链接时更改活动类?

    我有一个 html 作为侧边栏 并使用Bootstrap ul class nav nav list li class active a href Link 1 a li li a href link2 Link 2 a li li a h
  • 使用 SVG 的部分边框/描边

    我正在使用 svg d3 创建由 矩形 元素组成的图表 为每个矩形添加部分边框 描边 仅在矩形顶部 的最佳方法是什么 Thanks 我不认为 SVG 支持仅描边矩形或路径的一部分 描边不像 CSS 边框 您还有其他一些选择 所有这些都需要一
  • 获取此 contenteditable 元素中的当前行和行索引?

    我有一个这样的元素 span line 1 line 2 line 3 line 4 line 5 span 假设用户正在编辑 第 4 行 如何获取该 contenteditable 元素中的当前行和行索引 在插入符号位置 这是使用选择属性
  • 为移动设备设计网页界面

    如何使您的网站在标准浏览器和各种可用的移动设备上看起来都很好 目前 我尚未决定是尝试调整布局大小以使其适用于小型设备 还是为移动设备提供单独的 CSS 我的用例是一个国际象棋游戏 我希望整个棋盘都可用而无需向下滚动 你会推荐什么 基本上没有
  • 不固定高度的滚动div

    我需要构建一个动态调整大小的滚动 div div 应动态调整大小以适应屏幕 但如果内容不适合屏幕 它应该显示一个滚动条 因此浏览器自己的滚动条永远不需要激活 我可以通过在 div 中放置另一个 div 并使用来让滚动条出现在 div 中ov
  • 使用属性初始化 Angular 2 组件[重复]

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

随机推荐

  • 在实际应用或执行之前验证 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