typescript - HTML2Canvas 在 Ionic4 角度项目中生成空白图像。控制台没有错误。相同的代码在纯 html/javascript 中生成正确的图像
问题描述
我在 Ionic4 角度测试项目的 home.page.ts 中安装并导入了 html2canvas。我有一个普通的 100 像素 X 100 像素的黄色背景 div,带有单行文本。我将此 div 传递给 html2canvas 以作为 png 下载。html2canvas 在控制台中列出所有步骤(无错误)并生成与给定 div 大小相同但 div 为空的 png。它没有 div 或文本的颜色。
更改 div 的大小会正确生效,这意味着生成的图像与 div 的大小相同。这个测试项目演示了这个问题 - https://stackblitz.com/edit/html2cavasionic4test。
这是我的 home.page.ts
import { Component } from '@angular/core';
import * as html2canvas from 'html2canvas';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
selected = 1;
list: any = [{ id: 0, text: '0' }, { id: 1, text: 1 }];
changed(e) {
console.log(this.selected);
}
onPrintClicked(){
let div = document.getElementById("h2cTest");
const options = {allowTaint:true, background: "yellow", height: div.clientHeight, width: div.clientWidth };
html2canvas.default(div, options)
.then((canvas)=>{
var myImage = canvas.toDataURL("image/png");
console.log("image done");
this.downloadURI("data:" + myImage, "yourImage.png");
})
.catch(()=>{})
}
downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
//after creating link you should delete dynamic link
//clearDynamicLink(link);
}
}
在我的本地机器上,我创建了一个与上面的 stackblitz 项目具有相同功能的纯 html/javascript 页面,并在页面上包含脚本 html2canvs.min.js。这个简单的页面按预期工作并生成正确的图像。
html2Canvas 预计会生成 div 的图像,但它正在生成空白图像。设置有问题吗?
更新
应用标签是问题所在。
解决方案
https://www.npmjs.com/package/dom-to-image -> 比 html2canvas 效果更好 https://www.npmjs.com/package/jspdf -> 如果您需要保存为 pdf
页面.ts
import * as jsPDF from 'jspdf';
//or import jsPDF from 'jspdf';
import domtoimage from 'dom-to-image';
captureScreen() {
const div = document.getElementById('pdfContent');
const divHeight = div.clientHeight;
const divWidth = div.clientWidth;
const options = { background: 'white', width: divWidth, height: divHeight };
domtoimage.toPng(div, options).then((imgData) => {
const doc = new jsPDF('p', 'mm', [divWidth, divHeight]);
const imgProps = doc.getImageProperties(imgData);
const pdfWidth = doc.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
doc.save('pdfDocument.pdf');
});
}
page.html
<ion-button (click)="captureScreen('pdfContent')">
<ion-icon name="print" size='small' slot="icon-only"></ion-icon>
</ion-button>
<div id="pdfContent">
<h1>Testing this to pdf</h1>
</div>
在 ionic 5 上工作(在此处查看更多image-in-ionic4-angular)
注意:当前版本的 jsPDF 出现错误。这npm install jspdf@1.5.3 --save
工作正常
和生成的pdf
推荐阅读
- rx-java - 关于Maybe的反应性(rxjava)问题
- 与流动等
- r - L-BFGS-B 需要 'fn' 的有限值
- java - 复合主键表未填充到相关实体中
- c# - 如何在不使用服务模型的情况下反序列化 json 列表?
- java - Maven - 为java项目中的每个java包创建一个jar
- android - 将表盘部署到设备
- jquery - 如何使用 .selectmenu jquery ui 自动填充信用卡数据?
- javascript - 升级到 3.1 版本后 NokiaHere 地图渲染问题
- windows - 不同 Windows 版本的默认执行策略是什么?
- laravel - 我如何将 Laravel 的 Bootstrap 4 降级到 3.3.7