javascript - 如何使用 jsPDF 和 html2Canvas 计算转换为图像以适合 PDF 的 div 高度?
问题描述
我正在使用html2canvas将 div 转换为图像。
我想计算 div 的高度(以 px 为单位),使其适合 PDF 页面,保持图像的纵横比它应该适用于所有窗口尺寸(大屏幕、IPAD、台式机、笔记本电脑)。
我正在使用jsPDF生成 PDF
这是小提琴示例 http://jsfiddle.net/akshay1818/ys0z984x/51/
HTML 代码
<div id="target">
Set div height(in px) such that it will fit on the page maintaing the aspect ratio
</div>
<button onclick="takeScreenShot()">to pdf</button>
JavaScript 代码
window.takeScreenShot =function() {
const layout = document.getElementById("target");
const doc = new jsPDF("l", "mm", "a4");
const canvasimg = html2canvas(layout).then(async(canvasimg)=>{
let doc = new jsPDF("l", "mm", "a4");
let img = canvasimg.toDataURL('image/png');
const imgProps = doc.getImageProperties(img);
const pdfWidth = doc.internal.pageSize.getWidth();
var pdfPgHt = doc.internal.pageSize.getHeight();
const imgRatioHeight = (imgProps.height * pdfWidth) / imgProps.width;
doc.addImage(img, 'PNG', 0, 0, pdfWidth, imgRatioHeight);
doc.save('report.pdf');
})
}
提前致谢。
解决方案
推荐阅读
- r - 为什么这两个对象不一样?
- python - 使用 OpenCV 在对象周围绘制轮廓
- reactjs - React Router v5.0 嵌套路由
- protocol-buffers - 为什么 gRPC 使用长度前缀消息?
- javascript - tokenfield 不适用于 jQuery 克隆
- android - 无法将 ViewPager 与 androidx 一起使用
- java - kotlin 中的二维列表转换为 com.google.gson.internal.LinkedTreeMap
- gmail - 在 Gmail 中搜索字词并忽略附件
- mysql - 我更改了 wamp 文件夹的名称 - 我的 dbs 发生了什么事?
- pytorch - PyTorch 总 CUDA 时间