首先我需要截图的demo图片很多很多,当我使用html2canvas转的时候总是有一部分没有截上,我上网上找了几个办法,都没有解决,就很狗血无语,,
gitlab上好像没有一直没有回复
最后我是使用的dom-to-image插件解决的 搭配jspdf
冲冲冲
顺便问一下 有将页面转为pdf的功能吗 不转为canvas图片 就是直接dom元素和样式生成为pdf 可编辑
不分页
export const downloadPDF = async (ele) => {
var element = window.document.querySelector(ele); // 这个dom元素是要导出pdf的div容器
console.log(element);
if (!element) return;
const resp = await domtoimage.toPng(element);
let contentWidth = element.clientWidth;
let contentHeight = element.clientHeight;
// 设置pdf的尺寸,pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// 2为上面的scale 缩放了2倍
var pdfX = ((contentWidth + 10) / 2) * 0.75;
var pdfY = ((contentHeight + 500) / 2) * 0.75; // 500为底部留白
// 设置内容图片的尺寸,img是pt单位
var imgX = pdfX;
var imgY = (contentHeight / 2) * 0.75; //内容图片这里不需要留白的距离
var pdf = new jsPDF("p", "pt", [pdfX, pdfY]);
// 将内容图片添加到pdf中,因为内容宽高和pdf宽高一样,就只需要一页,位置就是 0,0
pdf.addImage(resp, "jpeg", 0, 0, imgX, imgY);
pdf.save(`1111f`);
};
分页
export const downloadPDF = async (ele) => {
var element = window.document.querySelector(ele); // 这个dom元素是要导出pdf的div容器
console.log(element);
if (!element) return;
const resp = await domtoimage.toPng(element);
let contentWidth = element.clientWidth;
let contentHeight = element.clientHeight;
let pageHeight = (contentWidth / 592.28) * 841.89;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
//页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28;
let imgHeight = (592.28 / contentWidth) * contentHeight;
let pdf = new jsPDF("", "pt", "a4");
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(resp, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(resp, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('content.pdf');
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。