离子 4 html2canvas答案

【问题标题】：Ionic 4 html2canvas离子 4 html2canvas
【发布时间】：2019-06-19 18:48:35
【问题描述】：

我正在尝试将 HTML 捕获到 Ionic 4 应用程序中的图像。我尝试使用html2canvas，但是它不起作用并在控制台中显示此输出：

这是我的代码：

var element = document.getElementById('capture');
  html2canvas(element).then(canvas => {
    var imgData = canvas.toDataURL("image/png");
    this.socialSharing.share(null, null, imgData);
});

【问题讨论】：

可能相关：stackoverflow.com/questions/54650369/…

标签： javascript ionic-framework html2canvas ionic4

【解决方案1】：

我也有同样的问题。我设法通过将我的代码从<ion-content> 标签中“修复”它。我的猜测是 html2canvas 不渲染阴影 DOM 元素（从 Ionic 4 开始，<ion-content> 就是这种情况）。

例如，这会输出一个空的画布：

<ion-content>
  <div id="capture">
    <h1>Test</h1>
  </div>
</ion-content>

但以下工作：

<div id="capture">
  <h1>Test</h1>
</div>

这不是一个真正的解决方案，但对我来说已经足够了......

【讨论】：

【解决方案2】：

我也在尝试这个组件，但它不起作用。我找到的解决方案是使用 dom-to-image 库。我附上了我所做的一个例子。您只需输入要转换的文件扩展名。

https://www.npmjs.com/package/jspdf

https://www.npmjs.com/package/dom-to-image

import * as jsPDF from 'jspdf';
import domtoimage from 'dom-to-image';

exportPdf(){
    const div = document.getElementById('pdf');
    const options = { background: 'white', height: 845, width: 595 };
    domtoimage.toPng(div, options).then((dataUrl) => {
        //Initialize JSPDF
        const doc = new jsPDF('p', 'mm', 'a4');
        //Add image Url to PDF
        doc.addImage(dataUrl, 'PNG', 0, 0, 210, 340);
        doc.save('pdfDocument.pdf');
    }
}

【讨论】：