Pdf导出

Acrobat Pro DC 2021 for Mac是一款PDF业余制作与编辑软件，寰球有超过500万家组织依附Acrobat DC来创立和编辑最智能的PDF，将PDF转换为Microsoft Office格局，Acrobat Pro DC具备从任何中央创立，编辑，共享和签订PDF文档所需的所有性能。 Acrobat Pro DC 2021 for Mac 利用任何文件创建 PDF 将扫描件、图像、网页和 Microsoft Office 文件转换为您能够解决的 PDF。 间接在您的 PDF 中进行编辑 无需从新输出，即可反复利用内容。轻松地增加文本、插入图像并更新表格。 随时随地拜访 PDF 在台式机、笔记本电脑或挪动设施上，从上次中断的地位持续工作。 电子签名和表格 咱们确保任何标记的平安和简略。 比以往更快地填写，签订和平安地共享PDF表单。发送具备法律约束力的PDF文档，收件人能够在任何中央签名 - 在浏览器或挪动设施上。还能够轻松发送，跟踪和存储签名文档。 随时随地进步生产力 使您的挪动设施成为一个庄重的PDF工具。 Acrobat Reader挪动应用程序始终收费，功能强大，其中蕴含随时随地查看，正文，签名和共享PDF所需的工具。通过Acrobat Pro DC订阅，您能够在iPad和Android平板电脑上取得残缺的PDF编辑性能。 轻松审查 使文档审查无痛。 当初，共享PDF和收集评论就像发送电子邮件一样简略 - 然而具备更多的管制，跟踪和没有芜杂的附件。收件人会收到一封蕴含PDF链接的电子邮件。他们只需点击即可关上，查看，评论，签名。无需登录或装置软件。 跟踪和合作 治理你的所有工作。一切都在一个中央。 理解须要您留神的文档或您与别人共享的文档，以便查看，查看或签名。无论您应用的是桌面设施，挪动设施还是网络设备，新扩大的主页视图都能让您把握最新性能。

状况阐明：在将HTML内容区导出PDF时，按width和height的绝对大小能够分为瘦长区域（下图蓝框）和扁宽区域（下图红框）两种状况。 我写的pdf导出逻辑在导出瘦长区域时没问题，在导出扁宽区域时，会呈现PDF内容横向被截断的状况（横向展现不全）。 举例如上面两张图片。 问题所在：html导出pdf通过了2个步骤：1.html -> img (没问题)2.img -> pdf (出了问题) 将img转为pdf并导出用的是jsPDF。jsPDF应用时分为3个步骤：1.const pdf = new jsPDF(args); 创立一个指定尺寸的空白的PDF，把它设想成画布。2.pdf.addImage(args); args有一系列的参数，在画布的指定地位放入图片。3.pdf.save(fileName); 导出pdf。 问题出在第1步，创立空白的pdf画布。 new jsPDF(options) 官网文档在上面linkhttps://artskydj.github.io/jsPDF/docs/jsPDF.html关注format，官网文档里写了反对array，形如[595.28, 841.89] （问题就在这） const pdf = new jsPDF("", "pt", pageSizeArr);若 咱们想要一个宽1000,高500的画布很天然的想到pageSizeArr = [1000, 500]但这样的输出，JSPDF会生成一个 宽500 高1000的画布 也就是说pageSizeArr = [1000, 500] 或 pageSizeArr = [500, 1000] jsPDF会都生成 宽500 高1000的画布 (!!!!!!!!) 在我的项目中，我的pageSizeArr设置如下pageSizeArr = [scrollWidth, scrollHeight];这种状况下，如果真的须要导出一个扁宽的HTML 内容区, (scrollWidth > scrollHeight)画布的尺寸和HTML的内容区尺寸对不上, HTML的右侧会被截断。 解决方案：scrollWidth > scrollHeight的时候，做一个A4纸比例的画布 宽:高 = 1 : 1.414 (简化为1 : 1.4)且 宽度 等于 scrollWidth。即pageSizeArr = [scrollWidth, 1.4 * scrollWidth]; ...

import html2canvas from 'html2canvas'import JsPDF from 'jspdf'export const printOut = (name, id) => { let shareContent = document.getElementById(id) // 须要截图的包裹的（原生的）DOM 对象 let width = shareContent.clientWidth // 获取dom 宽度 let height = shareContent.clientHeight // 获取dom 高度 let canvas = document.createElement('canvas') // 创立一个canvas节点 let scale = 1 // 定义任意放大倍数 反对小数 canvas.width = width scale // 定义canvas 宽度 缩放 canvas.height = height scale // 定义canvas高度 缩放 canvas.style.width = shareContent.clientWidth * scale + 'px' canvas.style.height = shareContent.clientHeight * scale + 'px' canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale ...