html2canvas和jsPDF部分灰度剖面
html2canvas和jsPDF部分灰度剖面
提问于 2019-07-18 14:00:30
我正在尝试使用html2canvas和jsPDF从HTML创建PDF。首先，我将所有的html元素作为image传递给PDF，然后一个一个地添加它们，如下所示：
var quality = 1
var report1 = null
var report2 = null
var report3 = null
var report4 = null
var report5 = null
var header = null
html2canvas(document.querySelector('header'), {scale: quality})
.then(canvas => {
header = canvas
html2canvas(document.querySelector('#report-1'), {scale: quality})
.then(canvas => {
report1 = canvas
html2canvas(document.querySelector('#report-2'), {scale: quality})
.then(canvas => {
report2 = canvas
html2canvas(document.querySelector('#report-3'), {scale: quality})
.then(canvas => {
report3 = canvas
html2canvas(document.querySelector('#report-4'), {scale: quality})
.then(canvas => {
report4 = canvas
html2canvas(document.querySelector('#report-5'), {scale: quality})
.then(canvas => {
report5 = canvas
var imgDataHeader = header.toDataURL('image/png');
var imgWidth = 210;
var imgHeight = header.height * imgWidth / header.width;
var doc = new jsPDF('p', 'mm', 'A4');
var position = 0
doc.addImage(imgDataHeader, 'PNG', 0, position, imgWidth, imgHeight);
position += imgHeight + 15;
var imgDataReport1 = report1.toDataURL('image/png')
imgHeight = report1.height * imgWidth / report1.width;
doc.addImage(imgDataReport1, 'PNG', 0, position, imgWidth, imgHeight);
position += imgHeight + 5;
var imgDataReport2 = report2.toDataURL('image/png');
imgHeight = report2.height * imgWidth / report2.width;
doc.addImage(imgDataReport2, 'PNG', 0, position, imgWidth, imgHeight);
position += imgHeight + 5;
doc.addPage();
position = 0
imgDataHeader = header.toDataURL('image/png');
imgHeight = header.height * imgWidth / header.width;
doc.addImage(imgDataHeader, 'PNG', 0, position, imgWidth, imgHeight);
position += imgHeight + 15;
var imgDataReport3 = report3.toDataURL('image/png');
imgHeight = report3.height * imgWidth / report3.width;
doc.addImage(imgDataReport3, 'PNG', 0, position, imgWidth, imgHeight);
position += imgHeight + 5;
var imgDataReport4 = report4.toDataURL('image/png');
imgHeight = report4.height * imgWidth / report4.width;
doc.addImage(imgDataReport4, 'PNG', 0, position, imgWidth, imgHeight);
position += imgHeight + 5;
doc.addPage();
position = 0
imgDataHeader = header.toDataURL('image/png');
imgHeight = header.height * imgWidth / header.width;
doc.addImage(imgDataHeader, 'PNG', 0, position, imgWidth, imgHeight);
position += imgHeight + 15;
var imgDataReport5 = report5.toDataURL('image/png');
imgHeight = report5.height * imgWidth / report5.width;
doc.addImage(imgDataReport5, 'PNG', 0, position, imgWidth, imgHeight);
position += imgHeight + 5;
doc.save( 'file-.pdf');
})
})
})
})
})
}) 问题是，除了第一个干净的区域外，其余的元素(理论上是白色背景)以灰色背景出现。
标度== 1
如果我增加了scale html2canvas option，这个问题就消失了，但是图表边框会完全变成白色(它们在一个必须出现的材料卡容器中)。
标度== 2
我试图更改html2canvas 选项中其他可用的选项，但没有什么改变。
期望结果
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-07-23 00:22:51
当我意识到灰色背景颜色在body中时，我解决了这个问题。似乎html2canvas没有得到父母的风格。因此，我必须在每个style="background:#f5f5f5f5"中添加div、scale = 2，并使用灰度setFillColor选项在pdf页面中添加相同的背景：
var doc = new jsPDF('p', 'mm', 'A4');
doc.setFillColor(245);
doc.rect(0, 0, 210, 700, "F");也许这是个解决办法，但对我来说已经足够了。
Stack Overflow用户
发布于 2020-08-17 01:03:59
如果有人真的在苦苦挣扎，因为你找不到任何答案，那就试着在配置中添加“scale:2”。这个简单的关键字解决了显示灰色背景的所有问题。
Stack Overflow用户
发布于 2019-12-06 15:12:45
对于这个灰色背景，我也遇到了同样的问题，这里有一个可以帮助您的解决方案:用这样的id制作表格中的图表：
<table id="report-1">
<tr>
<td>
<!-- Your Chart Here -->
</td>
</tr>
</table>每个图表都应该包含在表格中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57096327
复制相关文章
相似问题
腾讯云开发者
