react+antd使用html2pdf出现的图片导出问题
0
悬赏园豆：50
[已解决问题]
解决于 2023-09-18 10:11
在前几天,根据需求使用wangEditor做了一个富文本编辑器,在数据库中有一个字段专门保存其HTML文本数据的.然后,这几天需求是根据这个字段的html文本导出pdf
最终我选择了,html2pdf进行导出pdf,问题如下
context是HTML文本的内容,然后我从中获取了所有的img元素,在进行遍历
因为html2pdf需要的是base64格式的图片.所以我选用canvas进行base64转换
但是不知道为什么怎么都转换不出图片,转换出来的只是HTML2pdf自带的背景看着代码也没啥错
最佳答案
0
放弃了,换了后端的pdf导出
其他回答(2)
0
要将 Canvas 转换为 Base64，可以使用 JavaScript 的 canvas.toDataURL() 方法。该方法将 Canvas 转换为 Base64 字符串，并返回一个 URL。
以下是一个示例代码，演示如何将 Canvas 转换为 Base64：
javascript
function getBase64Image(img) {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
var base64Data = canvas.toDataURL('image/jpeg', 1);
return base64Data;
}
在上面的代码中，我们首先创建一个 Canvas 对象，并设置其宽度和高度。然后，我们使用 getContext('2d') 方法获取 Canvas 上下文，并使用 drawImage() 方法将图像绘制到 Canvas 上。最后，我们使用 toDataURL() 方法将 Canvas 转换为 Base64 字符串，并将其返回。
请注意，toDataURL() 方法的第一个参数是压缩语句，用于指定 Base64 字符串的编码方式。在上面的代码中，我们使用 image/jpeg 作为压缩语句，表示将 Canvas 转换为 JPEG 格式的 Base64。
收获园豆：25
不太可以,我用的就是这种,代码大体一致
0
要给img加个onload方法，类似img.onload = ()=>{
结合上面的canvas.toDataURL("image/png");
获取到base64url后；
将base64url赋值给img的src；
}
收获园豆：25