項(xiàng)目場景：
例如：需要導(dǎo)出PDF格式
問題描述
發(fā)現(xiàn)：自己導(dǎo)出的PDF，有表格超出之后，只會截取當(dāng)前屏幕可視區(qū)，下面的并不會導(dǎo)出原因分析：
提示：問題出現(xiàn)在滾動條加錯地方
解決方案：
首先：
npm install html2canvas
npm install jspdf
第二：新建一個htmlToPdf.js文件存放
// 導(dǎo)出頁面為PDF格式
import html2Canvas from './html2canvas'
import JsPDF from './jsPdf.debug'
export default{
? name:'wwutils',
? toolExportPdf(fileName) {
? ? let isCompeleted = false;
? ? setTimeout(() => {
? ? ? ? // 獲取需要打印的區(qū)域，以div為單位，此處使用的是vue的選擇器
? ? ? ? $("iframe").remove();
? ? ? ? var pdfDom = document.getElementById("exportImg");
? ? ? ? $("#exportImg").scrollTop(0);
? ? ? ? // 設(shè)置背景色
? ? ? ? pdfDom.style.background = "#F4F7FC";
? ? ? ? let _this = this;
? ? ? ? var exportName = fileName; // 導(dǎo)出生成文件的名稱
? ? ? ? var height = $("#exportImg").outerHeight();
? ? ? ? const Dom_height = $("#exportImg").height();
? ? ? ? const targetDom = document.querySelector("#exportImg");
? ? ? ? const copyDom = targetDom.cloneNode(true);
? ? ? ? copyDom.style.width = targetDom.scrollWidth + "px";
? ? ? ? copyDom.style.height = targetDom.scrollHeight + "px";
? ? ? ? document.body.appendChild(copyDom);
? ? ? ? html2Canvas(pdfDom, {
? ? ? ? ? ? allowTaint: false,
? ? ? ? ? ? useCORS: true,
? ? ? ? ? ? height: targetDom.scrollHeight,
? ? ? ? ? ? width: targetDom.scrollWidth,
? ? ? ? ? ? onrendered: function (canvas) {
? ? ? ? ? ? ? ? let contentWidth = canvas.width; //畫布寬度
? ? ? ? ? ? ? ? let contentHeight = canvas.height; //畫布高度
? ? ? ? ? ? ? ? let pageHeight = (contentWidth / 592.28) * 841.89;
? ? ? ? ? ? ? ? let leftHeight = contentHeight;
? ? ? ? ? ? ? ? let position = 0;
? ? ? ? ? ? ? ? let imgWidth = 592.28;
? ? ? ? ? ? ? ? let imgHeight = (592.28 / contentWidth) * contentHeight;
? ? ? ? ? ? ? ? let pageData = canvas.toDataURL("image/jpeg", 1.0);
? ? ? ? ? ? ? ? let PDF = new JsPDF("", "pt", "a4");
? ? ? ? ? ? ? ? if (leftHeight < pageHeight) {
? ? ? ? ? ? ? ? ? ? PDF.addImage(pageData,"JPEG",0,0,imgWidth,imgHeight);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? while (leftHeight > 0) {
? ? ? ? ? ? ? ? ? ? ? ? PDF.addImage(pageData,"JPEG",0,position + 4,imgWidth,imgHeight);
? ? ? ? ? ? ? ? ? ? ? ? leftHeight -= pageHeight;
? ? ? ? ? ? ? ? ? ? ? ? position -= 841.89;
? ? ? ? ? ? ? ? ? ? ? ? if (leftHeight > 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? PDF.addPage();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? PDF.save(exportName + ".pdf");
? ? ? ? ? ? ? ? document.body.removeChild(copyDom);
? ? ? ? ? ? ? ? isCompeleted = true;
? ? ? ? ? ? ? ? // PubSub.publish("isExportPdfCompleted", {
? ? ? ? ? ? ? ? // ? ? state: true,
? ? ? ? ? ? ? ? // });
? ? ? ? ? ? },
? ? ? ? ? ? background: "#F4F7FC",
? ? ? ? ? ? windowHeight: targetDom.scrollHeight, // 獲取y方向滾動條中的內(nèi)容
? ? ? ? ? ? y: targetDom.scrollHeight // 頁面在垂直方向的滾動距離
? ? ? ? });
? ? }, 1000);
? ? return isCompeleted
?},
}
?可以使用在main.js中引用，也可以在本地文件直接引用
?
文章來源：http://www.zghlxwxcb.cn/news/detail-598021.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-598021.html
到了這里，關(guān)于前端導(dǎo)出PDF（純前端功能）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
