前端项目生成PDF
1、直接上代码
import html2canvas from "html2canvas";
import JsPDF from "jspdf";
// import { uploadImg } from "./service";
export const html2pdf = async (name, id = "document-dom") => {
let el = document.getElementById(id); //通过getElementById获取要导出的内容
let ele = el.cloneNode(true);
try {
} catch (e) {}
const div = document.createElement("div");
div.setAttribute("id", "divInnerHtmlIsFileList");
div.style.cssText = "position:absolute;z-index:-1;bottom:0;left:0";
div.appendChild(ele);
document.body.appendChild(div);
let eleW = el.offsetWidth; // 获得该容器的宽
let eleH = el.offsetHeight; // 获得该容器的高
let eleOffsetTop = el.offsetTop; // 获得该容器到文档顶部的距离
let eleOffsetLeft = el.offsetLeft; // 获得该容器到文档最左的距离
let canvasEle = document.createElement("canvas");
let abs = 0;
let win_in =
document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度(不包含滚动条)
let win_out = window.innerWidth; // 获得当前窗口的宽度(包含滚动条)
if (win_out > win_in) {
abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
}
canvasEle.width = eleW * 2; // 将画布宽&&高放大两倍
canvasEle.height = eleH * 2;
let context = canvasEle.getContext("2d");
context.scale(2, 2);
context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
let canvas = await html2canvas(div, {
dpi: 96, //分辨率
scale: 2, //设置缩放
useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。,
//backgroundColor:'#ffffff',这样背景还是黑的
bgcolor: "#ffffff", //应该这样写
logging: false, //打印日志用的 可以不加默认为false
});
// el.setAttribute("crossOrigin",'anonymous');
let contentWidth = canvas.width;
let contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
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 = (595.28 / contentWidth) * contentHeight;
let pageData = canvas.toDataURL("image/jpeg", 1.0);
let pdf = new JsPDF("", "pt", "a4");
// var pdf = new JsPDF('p', 'pt', 'letter');
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
// 分页
while (leftHeight > 0) {
pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
//可动态生成
const formData = new FormData();
let pdfFile = new window.File([pdf.output("blob")], name, {
type: "application/pdf",
});
const url = window.URL.createObjectURL(pdfFile);
window.open(url)
};
export const hideDom = (el, ele) => {
try {
let div = document.getElementById("divInnerHtmlIsFileList");
div.removeChild(ele);
document.body.removeChild(div);
} catch (e) {}
};
调用的地方
import {html2pdf} from '@/global/utils'
const printGB = ()=>{
html2pdf('名字', `DomId`)
}