首页 > 其他分享 >导出当前页面为PDF文件

导出当前页面为PDF文件

时间:2023-11-15 15:13:07浏览次数:30  
标签:canvas const 导出 let A4 pdf PDF 页面 PDFFile


html2canvas+jspdf

import useCompToPDF from '@/hooks/use-pdf-hooks/usePDFHooks';
const ref = useRef<HTMLDivElement>(null);
const { exportPDf } = useCompToPDF({ fileName: '导出文件' });

<button onClick={() => {exportPDf(ref.current)}}>导出PDF</button>
<div className={styles.container} ref={ref}>导出的内容<div>

 


useCompToPDF文件

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

interface CompToPDFProps {
fileName: string;
}
const PDFFile = {
A4: [592.28, 841.89],
};

//自定义的hooks函数
const useCompToPDF = (props: CompToPDFProps) => {
const { fileName } = props;
const exportPDf = (element: HTMLElement | null) => {
if (element) {
html2canvas(element).then((canvas) => {
//获取画布的宽高
let canvasWidth = canvas.width;
let canvasHeight = canvas.height;
//一页PDF显示html生成的canvas高度
let pdfPageHeight = (PDFFile.A4[1] / PDFFile.A4[0]) * canvasWidth;
//未生成pdf的html页面内高度
let pdfAllHeight = canvasHeight;

let position = 0; //页面偏移

//转换图片为dataURL,参数:图片格式和清晰度(0-1)
let pageData = canvas.toDataURL('image/jpeg', 1.0);

//html页面生成的canvas在pdf中图片的宽高
let imgWidth = PDFFile.A4[0] - 60; //减去边距宽度
let imgHeight = (canvasHeight / canvasWidth) * PDFFile.A4[0];
//方向p竖直 l横向,尺寸ponits,格式a4
let pdf = new jsPDF('p', 'pt', PDFFile.A4);

//当内容未超过pdf一页显示的范围,无需分页
if (pdfAllHeight < pdfPageHeight) {
// 从图片顶部开始打印 30 左右边距, 0 上下边距
pdf.addImage(pageData, 'jpeg', 30, 0, imgWidth, imgHeight);
} else {
while (pdfAllHeight > 0) {
pdf.addImage(pageData, 'jpeg', 0, position, imgWidth, imgHeight);
pdfAllHeight -= pdfPageHeight;
position -= PDFFile.A4[1];
//避免添加空白页
if (pdfAllHeight > 0) {
pdf.addPage();
}
}
}
pdf.save(`${fileName}.pdf`);
});
}
};
return {
exportPDf,
};
};
export default useCompToPDF;

 

标签:canvas,const,导出,let,A4,pdf,PDF,页面,PDFFile
From: https://www.cnblogs.com/111wdh/p/17833896.html

相关文章

  • TienChin-课程管理-课程导出
    更改Course.java:/***课程ID*/@TableId(value="course_id",type=IdType.AUTO)@NotNull(message="{course.id.notnull}")@Excel(name="课程编号")privateIntegercourseId;/***课程类型1.舞蹈类2.游泳类3.拳击类*/@NotNull(message=......
  • weblogic导出excel遇到的问题记录
    weblogic使用poi导入jar包冲突解决:https://www.cnblogs.com/ljch/p/12045160.htmlhttps://blog.csdn.net/teigakushi/article/details/17305533https://blog.csdn.net/liushengbaba/article/details/84632236仅针对10.3及以上版本。在WEB-INF下面添加weblogic.xml文件:https......
  • 批量导入和导出docker镜像文件
    维护服务器时,如果服务器没有网络,还需要批量加载多个Docker镜像文件,我们可以使用脚本通过循环来自动化这个操作过程。批量导入docker镜像文件创建一个文本文件,列出你要加载的所有镜像文件路径。每行一个文件路径。创建一个Shell脚本(例如load_images.sh),并打开它。在脚本中,使用docker......
  • 【专题】2023食品行业营销数智化洞察报告PDF合集分享(附原数据表)
    原文链接:https://tecdat.cn/?p=34250原文出处:拓端数据部落公众号近日,一份《2023食品行业营销数智化洞察报告合集》发布,该报告从多个角度对市场、行业、企业进行了数据分析,并预测了2023年营销走势及增长点。阅读原文,获取专题报告合集全文,解锁文末140份食品营销数智化相关行业研究......
  • 【专题】2023年中国汽车出海研究报告PDF合集分享(附原数据表)
    原文链接:https://tecdat.cn/?p=34260原文出处:拓端数据部落公众号近年来,我国汽车出口需求旺盛,并保持强劲增长趋势,至2023年一季度,汽车出口总量首超日本,中国汽车“破浪出海”正当时。本报告合集旨在通过梳理中国汽车的出海背景,分析汽车厂商出海的现状及特点,洞察中国汽车出海的风险......
  • MySQL 导出表结构(含列名、数据类型、字段备注注释)导出成Excel
    SELECTCOLUMN_NAME列名,COLUMN_COMMENT名称,column_key主键,--COLUMN_TYPE数据类型,DATA_TYPE字段类型,CHARACTER_MAXIMUM_LENGTH长度,IS_NULLABLE是否必填,--COLUMN_DEFAULT描述FROMINFORMATION_SCHEMA.COLUMNSwhere--developer......
  • java 使用documents4j将word转pdf
    documents4j简介document4j是一个用来进行文档格式转换的Java工具库,它通过借助本机中支持指定文件格式到目标文件格式转换的应用,来实现整个转换的过程。document4j实现了MicrosoftWord、Excel的适配功能,可以将docx文件转换为pdf文件,并且在这个过程中不会出现非微软文件转换出......
  • js处理前端页面复选框多页复选同时生效的问题
    虽然是后端开发,但在实际的工作中难免会碰到一些前端相关的任务需要自己处理,下面就是本人开发工作中处理的前端相关分页复选的问题。总结一下,以备日后重复遇到:<scripttype="text/javascript">//初始化数据$(function(){$('#queryButton').removeAttr('disabled'......
  • cshtml页面中动态生成URL,Url.RouteUrl()与 Url.Action()有什么区别
    原文链接:http://cn.voidcc.com/question/p-yrfdusit-kx.htmlRouteUrl根据路由名称生成url。如果您有多个参数相似的路由,则Action方法可能会选择错误的路由-它会根据路由定义的顺序工作。这可能发生在您的路线具有可选参数时。如果您想确保使用某个路由网址,您需要呼叫RouteUrl......
  • vue基于vue-pdf实现pdf预览
    <template><divclass="pdf-container"><divclass="page-tool">文件名称扩展<divclass="page-tool-fixed"v-if="showTool"><spanclass="sc......