react 实现导出PDF功能

1.首先需要两个库

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas'

2.封装

/*
PDF导出封装
title:文档下载名字
node:dom最完成节点-- ID选择器
*/
export const exportPDF = (title:string,node:any) =>{const element = document.getElementById(node);    // 这个dom元素是要导出pdf的div容器const w = (element as any).offsetWidth;    // 获得该容器的宽const h = (element as any).offsetWidth;    // 获得该容器的高const offsetTop = (element as any).offsetTop;    // 获得该容器到文档顶部的距离const offsetLeft = (element as any).offsetLeft;    // 获得该容器到文档最左的距离const canvas = document.createElement("canvas");let abs = 0;const win_i =  document.body.clientWidth;    // 获得当前可视窗口的宽度（不包含滚动条）const win_o = window.innerWidth;    // 获得当前窗口的宽度（包含滚动条）if (win_o > win_i) {abs = (win_o - win_i) / 2;    // 获得滚动条长度的一半}canvas.width = w * 2;    // 将画布宽&&高放大两倍canvas.height = h * 2;const context = canvas.getContext("2d");(context as any).scale(2, 2);(context as any).translate(-offsetLeft - abs, -offsetTop);// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此// translate的时候，要把这个差值去掉html2canvas((element as any),{allowTaint: true,scale: 2 // 提升画面质量，但是会增加文件大小}).then(function (canvas) {const contentWidth = canvas.width;const contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;const pageHeight = contentWidth / 592.28 * 841.89;//未生成pdf的html页面高度let leftHeight = contentHeight;//页面偏移let position = 0;//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高const imgWidth = 595.28;const imgHeight = 592.28 / contentWidth * contentHeight;const pageData = canvas.toDataURL('image/jpeg', 1.0);const str:any = ''const pdf = new jsPDF(str, 'pt', 'a4');//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页if (leftHeight < pageHeight) {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(`${title}.pdf`);});
}

3.使用

//exportPDF(你的标题,ID选择器)
exportPDF(crfTitle,'crfContent')

react 实现导出PDF功能相关推荐

cad导出pdf_如何使用浩辰CAD看图王软件来快速导出PDF功能？
浩辰CAD旗下产品都是具有导出PDF功能的,如果是浩辰CAD平台软件或者专业软件选择 dwg to pdf 打印机,就可以输出pdf文件,如果是浩辰CAD看图王则直接就有导出PDF的功能. 浩辰CAD ...
java导出pdf功能记录
这几天已在做处理导出pdf文件的功能,摸索了几天总算可以了.记录下这几天遇到的问题. 1.网上基本都是基于Itext5和Itext7来处理的.我最终是在Itext5上成功了,itext7应该是模板出问 ...
Java快速实现导出PDF功能
Word转PDF并导出–Windows环境实现一.制作word模板,这里需要文件后缀默认是.docx,${xxxx}是需要替换的内容二.添加poi所需要的jar包文件,这里使用maven进行jar ...
springboot项目实现导出pdf功能，这也太简单了吧
往期文章 springcloud整合knike4j聚合微服务接口文档 spring源码 - 条件注解@ConditionnalOnClass的原理分析用最简单的话讲最明白的红黑树文章目录往期文章 ...
java生成pdf电子书_java itext导出PDF功能实现
java使用itext导出PDF文本绝对定位(实现方法) jar:itext-4.2.1.jar 在很多公文的落款处都需要绝对定位,所以记录此代码如下: PdfWriter writer = PdfW ...
前端导出pdf功能（超详细）
实现思路:将html页面生成pdf文件,需首先将页面转换为图片,然后再输出成pdf. 一.先引入html2canvas npm install html2canvas 二.项目内引入 import h ...
vue 导入excel插件_Vue框架下实现导入导出Excel、导出PDF
项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出打印表格经过技术选型,项目组一致决定通过 ...
cad导出pdf_CAD看图如何导出PDF
当我们拿到一张图纸,为了看图方便或者其他方面的需要,我们会将图纸导出为PDF格式,这样既可以在看图的时候可以清楚的看清图纸的内容,又可以保证看图者不更改图纸上的内容,因此,将dwg格式的图纸导出为PD ...
php html 转 pdf,php 实现 html 导出 PDF
最近在做一个OA系统,客户要求把财务管理模块的几个单据的导出PDF格式.因为项目是团队开发,我最后才实现自己的任务里的导出PDF功能,看了前面小伙伴实现的导出PDF功能案例,他们使用的是 fpdf 这 ...

react 实现导出PDF功能

1.首先需要两个库

2.封装

3.使用

react 实现导出PDF功能相关推荐

最新文章

热门文章