项目场景：

例如：需要导出PDF格式

问题描述

发现：自己导出的PDF，有表格超出之后，只会截取当前屏幕可视区，下面的并不会导出

原因分析：

提示：问题出现在滚动条加错地方

解决方案：

首先：

npm install html2canvas

npm install jspdf

第二：新建一个htmlToPdf.js文件存放

// 导出页面为PDF格式

import html2Canvas from './html2canvas'

import JsPDF from './jsPdf.debug'

export default{

name:'wwutils',

toolExportPdf(fileName) {

let isCompeleted = false;

setTimeout(() => {

// 获取需要打印的区域，以div为单位，此处使用的是vue的选择器

$("iframe").remove();

var pdfDom = document.getElementById("exportImg");

$("#exportImg").scrollTop(0);

// 设置背景色

pdfDom.style.background = "#F4F7FC";

let _this = this;

var exportName = fileName; // 导出生成文件的名称

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方向滚动条中的内容

y: targetDom.scrollHeight // 页面在垂直方向的滚动距离

});

}, 1000);

return isCompeleted

},

}

可以使用在main.js中引用，也可以在本地文件直接引用

前端导出PDF（纯前端功能）相关推荐

pdfmake支持html,pdfMake前端导出pdf
pdfMake前端导出pdf 目前导出PDF还是后端(或nodejs)比较好. (如果没有必要) 导出方案后端: IText,wkhtmltopdf...等等. 前端: jsPdf,pdfKit,r ...
前端导出pdf功能（超详细）
实现思路:将html页面生成pdf文件,需首先将页面转换为图片,然后再输出成pdf. 一.先引入html2canvas npm install html2canvas 二.项目内引入 import h ...
vue导出word纯前端实现
最近项目有个需求导出word,纯前端实现,查了查资料,用docxtemplater简直不要太简单. 直接把官网例子拿过来就可以了.!!! 官网地址首先,新建一个docx文件,把模板先写好. 注意!! ...
vue：前端导出PDF 加图片：前端
npm i vue-to-pdf --save <div id="exportPdf" ref="exportPdf"></div> & ...
前端导出pdf以及导出内容截断的解决办法
1.有截断的pdf导出 //导出pdf pdfExport() {// let top = document.getElementById('main');// if (top != null) {/ ...
springboot导出pdf到前端浏览器预览下载
画不多说先上成功后导出的pdf文件 2.maven依赖 <dependency><groupId>com.itextpdf</groupId><artifac ...
vue 前端导出PDF文件学起来
首先用 npm 引入 pdf 需要的依赖,之后需要进行二次封装,才能应用 npm install html2canvas npm install jspdf --------------------- ...
使用Vue导出word(纯前端，异步处理图片)
项目需要导出word,于是乎又是查阅资料.然后自己写. 参考链接 https://github.com/evilc0des/docxtemplater-image-module-free https: ...
html页面导出pdf截断问题,前端导出pdf以及导出内容截断的解决办法
$("#downpdf").on("click", function () { document.body.scrollTop=document.documen ...

前端导出PDF（纯前端功能）

项目场景：

问题描述

原因分析：

解决方案：

前端导出PDF（纯前端功能）相关推荐

最新文章

热门文章