前端vue导出pdf

1.下载插件

npm install html2canvas
npm install jspdf

2.创建htmlToPdf.js**

2-1(一页展示所有内容，可避免分页截断)

import html2canvas from "html2canvas";
import JsPDF from "jspdf";
/*** @param  ele          要生成 pdf 的DOM元素（容器）* @param  padfName     PDF文件生成后的文件名字* */
function downloadPDF(ele, pdfName) {let el = document.getElementById(ele); //通过getElementById获取要导出的内容let eleW = el.offsetWidth; // 获得该容器的宽let eleH = el.offsetHeight; // 获得该容器的高let eleOffsetTop = el.offsetTop; // 获得该容器到文档顶部的距离let eleOffsetLeft = el.offsetLeft; // 获得该容器到文档最左的距离var canvas = document.createElement("canvas");var 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; // 获得滚动条宽度的一半}canvas.width = eleW * 2; // 将画布宽&&高放大两倍canvas.height = eleH * 2;var context = canvas.getContext("2d");context.scale(2, 2);context.translate(-eleOffsetLeft - abs, -eleOffsetTop);html2canvas(el, {dpi: 96, //分辨率scale: 2, //设置缩放useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。,//backgroundColor:'#ffffff',这样背景还是黑的bgcolor: "#ffffff", //应该这样写logging: false, //打印日志用的 可以不加默认为false}).then((canvas) => {var contentWidth = canvas.width;var contentHeight = canvas.height;let pageData = canvas.toDataURL("image/jpeg", 1.0);let pdfX = ((contentWidth + 10) / 2) * 0.75;let pdfY = ((contentHeight + 20) / 2) * 0.75;let imgX = pdfX;let imgY = (contentHeight / 2) * 0.75;var pdf = new JsPDF("", "pt", [pdfX, pdfY]);pdf.addImage(pageData, "JPEG", 0, 0, imgX, imgY);//可动态生成pdf.save(pdfName);});
}
export default {downloadPDF,
};

2.2(分页，不可避免截断情况)

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
function downloadPDF(ele, pdfName){let el=document.getElementById(ele)  //通过getElementById获取要导出的内容let eleW = el.offsetWidth;// 获得该容器的宽let eleH = el.offsetHeight;// 获得该容器的高let eleOffsetTop = el.offsetTop;  // 获得该容器到文档顶部的距离let eleOffsetLeft = el.offsetLeft; // 获得该容器到文档最左的距离var canvas = document.createElement("canvas");var 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;    // 获得滚动条宽度的一半}canvas.width = eleW * 2;    // 将画布宽&&高放大两倍canvas.height = eleH * 2;var context = canvas.getContext("2d");context.scale(2, 2);context.translate(-eleOffsetLeft -abs, -eleOffsetTop);html2canvas( el, {dpi: 96,     //分辨率scale: 2,    //设置缩放useCORS:true,  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。,//backgroundColor:'#ffffff',这样背景还是黑的bgcolor :'#ffffff',//应该这样写logging:false   //打印日志用的 可以不加默认为false} ).then( (canvas)=>{// el.setAttribute("crossOrigin",'anonymous');var contentWidth = canvas.width;var contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;var pageHeight = contentWidth / 592.28 * 841.89;//未生成pdf的html页面高度var leftHeight = contentHeight;//页面偏移var position = 0;//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高var imgWidth = 595.28;var imgHeight = 595.28/contentWidth * contentHeight;let pageData = canvas.toDataURL('image/jpeg', 1.0);var pdf = new JsPDF('', 'pt', 'a4');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();}}}//可动态生成pdf.save(pdfName);})
}
export default {downloadPDF
}

3.使用

import htmlToPdf from "../util/htmlToPdf";exportPdf() {//view_summary 节点名称,aaa  pdf文件名htmlToPdf.downloadPDF("view_summary", aaa);},

前端vue导出pdf相关推荐

前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
vue 导出PDF格式
1.npm安装两个模块 cnpm install --save html2canvas // 将页面html转换成图片 cnpm install jspdf --save // 将图片生成pdf 2. ...
jsPdf+html2Canvas+react实现前端页面导出pdf，并解决jspdf分页图片过长截断问题
第一步在utils下面创建一个工具文件exportPDF.js 以下每一句代码都有对应的注释,并且针对不同情况,作出了相应的解释,如果有需要的话,请耐心看完. import html2Canvas ...
前端vue导出Excel（多sheet）
场景: 当导出文件的时候遇到结构复杂的表格(如:表头合并):或者数据分页的时候,后端就很难操作了,难以保持表格原有结构.所以就需要前端导出. 步骤如下: 1.组装数据 2.标记表头合并项,计算合并项 ...
看大神如何使用vue导出pdf
前端pdf https://blog.csdn.net/qq_37880968/article/details/94626001
纯前端 vue 导出excel 这里用 vue-json-excel插件
1.npm安装依赖 npm install vue-json-excel 2.项目主文件入口main.js全局引入 import JsonExcel from 'vue-json-excel'Vue. ...
前端vue导出 xlsx 实现带标题内容居中自动换行合并单元格加边框合计字体大小设置等
1.在src下的libs文件夹下新建一个excel文件夹,里面放入下载好的两个文件(Blob.js和Export2Excel2.js) 2.在所需要导出的vue文件里引入: import { toEx ...
vue导出pdf文件
根据页面的布局去导出,比如字体,字号,颜色,段落间距等,需要用css去设计好,然后去导出,但是导出的是按a4纸的尺寸导出的,所以细节需要不断的去优化. 页面效果把页面dom元素,模拟成一张画布,然后 ...
基于公司需求的探索vue导出word、xls、pdf
技术的应用而生都是基于需求!崇尚技术积累经验! 如何运用开源js库来实现需求,是快速开发的目的!结合自己开发功能的经历来说!使用插件能更好的的解决解决交互的平滑顺畅!由于项目时间限制,只能采用开源的j ...

前端vue导出pdf

前端vue导出pdf相关推荐

最新文章

热门文章