小白,想脱白 2022-05-10 14:29 采纳率: 60%
浏览 183
已结题

有没有人遇到过,vue前端 html2cancas截图不全的问题?

1、就是截图里面有一个table,table字段太多,导致有滚动条

2、所以截图的时候,后面隐藏的部分,没有截取到

3、相关代码
getPdf(pdfTitle){
let that = this;
html2canvas(document.querySelector("#pdfDom"),{
//跨域
allowTaint:false,
useCORS:true,
}).then(canvas => {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let pageHeight = (contentWidth / 592.28) * 841.89;
let leftHeight = contentHeight;
let position = 0;
let imgWidth = 595.28;
let imgHeight = (592.28 / contentWidth) * contentHeight;
var imgData = canvas.toDataURL("image/jpeg",1.0)
var PDF = new JsPDF("", "pt", "a4");
//单页
if (leftHeight < pageHeight) {
// PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
PDF.addImage(imgData, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
//多页
while (leftHeight > 0) {
PDF.addImage(imgData, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//排除空白页
if (leftHeight > 0) {
PDF.addPage();
}
}
}
PDF.save(pdfTitle + ".pdf");
});
that.printAssetsView = false;
},

4、网上看了,都说是body的宽度问题,canvas的width超过了body的width

5、就是想要,滚动条后面隐藏的部分,也能截取到

  • 写回答

2条回答 默认 最新

  • 前端陈皮喵 2022-05-10 14:39
    关注

    这个就是截显示在当前页面的部分的内容吧,滚动滚动条再出现的就截不到了,只是给当前网页页面截图

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月18日
  • 已采纳回答 5月10日
  • 创建了问题 5月10日

悬赏问题

  • ¥15 c++多文件编译报错:undefined reference to
  • ¥20 为什么zynq CAN IP 无法进入config配置模式,XCan_SelfTest函数失效?
  • ¥15 Pycharm中程序直接运行可以但进入调试报错
  • ¥15 MATLAB动图问题
  • ¥15 有段代码不知道怎么理解,const isToken = (config.headers || {}).isToken === false
  • ¥15 我的显卡支持CUDA最高版本是12.3,这个版本也支持VS 2022 17.0这种情况下如果我想下载CUDA11.8,需要下载旧版本的VS2022吗
  • ¥15 pointnet2包安装
  • ¥20 射频功率问题,解答者有酬谢!
  • ¥80 构建降雨和积水的预测模型
  • ¥15 #Qt Transform setTransform()在鼠标拖动移动视角是一致在原地不动,无法变换视角(细微观察似乎视图有在原地抖动),无法变换视角(细微观察似乎视图有在原地抖动)