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 ...

前言生成PDF有很多种方案，现在只讨论用jspdf加html2canvas生成多页PDF时，相信用过的人也遇到如果文字或图片卡在分页位置处被无情裁断的问题。再次之前先简单介绍下我们用于解决问题的属性。 Columns 属性介绍columns:100px 3; //每列多少宽度 分多少列 也就是：column-count:3 // 分多少列column-width: 100px //每列多少宽度 column-fill: auto; //列排序充列 //默认是balance 就是代表尽量平均的内容； auto会设置成填满 往后铺 column-gap:40px; //设置列之间的间隔column-rule:4px outset #ff6430; //列与列之间的分隔线 宽度 线类型 颜色 也就是：column-rule-width //列与列之间的分隔线 宽度column-rule-style //列与列之间的分隔线 类型column-rule-color //列与列之间的分隔线 颜色 column-count:3; //分成多少列column-fill: auto; //列排序充列 默认是balance 就是代表尽量平均的内容； auto会设置成填满 往后铺 column-gap:40px; //列与列之间的距离column-rule:4px outset #ff6430; // 列与列之间的分隔线在线写html 可以过去试试：https://www.runoob.com/try/tr... 浏览器的兼容兼容截止我编写时间2019.09.07 实际应用：好，现在重新回到我们的问题。这个问题是很正常的，事关我们是用画布截图然后放进去PDF里面，而画布只会根据高度够了就截一张，它是不会去监控那个问题是不是刚好卡在字体或图片的中间呢~ 例如： 我前阵子也遇到相同的问题，我这边的解决方法是，舍弃截图从上往下截的截图： 方案： 改用在排版时就已经分页排版好，除了封面外，其它时间页头页脚浮动是页面上方，截图是一页一页的截，这样好处是前端能清晰掌握整个过程和排版甚至是分页的计算。【采用】 那么如果能解决按每页的排呢？？？ 条件发射解决方法：循环页面元素，计算该元素是否刚好卡在一页的高度位置，如果是， 那么我们把它后面的就不显示了，或者插入个分页结束符等； 很明显这个是行不通的。 一方面是：因为整个document下来 元素很多 大量循环所有的元素来监控也很不科学； 另一方面：现在这种基于dom结构渲染完了 ，生插一个标签的结束符。例如</div>这种，也是算不清有多少个种类不同的结束符； 所以这很明显是个错误示范 我们停止对于这边的思考。 ...

PDF 保存原理 html转canvas再转pdf以下是React中使用，改成VUE使用原理也差不多第三方库yarn add html2canvas jspdf 代码直接调用handlePDF方法即可下载。 import html2Canvas from "html2canvas";import * as jsPDF from "jspdf"; handlePDF = () => { // 获取需要打印的Dom节点 const pdfDom = document.getElementsByClassName("pdf")[0]; html2Canvas(pdfDom, { windowWidth: pdfDom.scrollWidth, windowHeight: pdfDom.scrollHeight + 200, height: pdfDom.scrollHeight + 200, // 截屏起止位置 scrollX、scrollY scrollY: 0, // 放大两倍，防止模糊 scale: 2 }).then(canvas => { var contentWidth = canvas.width; var contentHeight = canvas.height; var pageHeight = (contentWidth / 592.28) * 841.89; var leftHeight = contentHeight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = (595.28 / contentWidth) * contentHeight; var pageData = canvas.toDataURL("image/jpeg", 1.0); var pdf = new jsPDF("", "pt", "a4"); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, "JPEG", 20, 40, imgWidth, imgHeight); } else { while (leftHeight > 0) { pdf.addImage(pageData, "JPEG", 20, position + 40, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if (leftHeight > 0) { pdf.addPage(); } } } pdf.save(`方案配置.pdf`); });};代码基于html2Canvas + jspdf 实现下载pdf功能修改，原代码无法截屏外内容。 ...

安利一个markdown免费转换为pdf的开源网站, 很好用,关键还免费使用很简单,一键导出, 支持的语法格式比较多,可以添加水印,页眉markdown转pdf网站

更多精彩博文，欢迎访问我的个人博客 说明我个人是一直使用Swagger作为接口文档的说明的。但是由于在一些情况下，接口文档说明需要以文件的形式交付出去，如果再重新写一份文档难免有些麻烦。于是在网上看到了Swagger2Markup + asciidoctor导出PDF的方法，百度一番后感觉网上的文章还是有很多没有描述清楚的地方，遂还是硬着头皮把官方的英文文档大致浏览了一下，按照自己的思路整理出具体的步骤。 本文用到的工具： Gradle - 4.10.3SpringBoot - 2.1.6.RELEASESwagger - 2.9.2Swagger2Markup - 1.3.3asciidoctorspring-restdocs-mockmvc准备Swagger数据SpringBoot中使用Swagger的过程就不再赘述了，下面是本文使用的范例： @Configuration@EnableSwagger2class SwaggerConfig { @Bean public Docket createRestApi() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSelectors.basePackage("com.jptangchina.gradle.controller")) .paths(PathSelectors.any()) .build(); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title("Swagger2Markup Test Api") .version("1.0") .build(); }}@RestController@RequestMapping("/user")@Api(tags = "用户接口")public class UserController { @ApiOperation("用户登录") @ResponseBody @PostMapping("/login") public Result<Void> login( @ApiParam(value = "用户名", example = "jptangchina", required = true) @RequestParam String username, @ApiParam(value = "密码", example = "jptangchina", required = true) @RequestParam String password) { return Result.ok(); }}使用org.asciidoctor.convert生成PDF（个人不推荐使用）官方教程地址：https://github.com/Swagger2Ma...仅为了简单的导出PDF而言，本文针对官方案例均有所改动，去掉了部分没有用到的配置。 ...

百度上根据pdf转makrdown为关键字进行搜索，结果大多数是反过来的转换，即markdown文本转PDF格式。但是PDF转markdown的解决方案很少。正好我工作上有这个需求，所以自己实现了一个解决方案。下图是一个用PDF XChange Editor打开的PDF文件，我想将其内容通过markdown格式导出。(1) 首先将该PDF导出成word格式，后缀.docx(2） 使用typora获得该word文档的markdown源代码：此时任务只完成了一半，因为typora这个工具转换成的markdown格式，如果原始的word文档里包含图片，这些图片以本地图片的形式存在于markdown里，那我如果直接将包含了这些本地图片的标签的markdown发布到简书，CSDN，开源中国，腾讯云，阿里云这些支持markdown的社区时，这些本地图片将无法显示。因此我们必须找到一个高效的方法，将word里包含的本地图片先上传到网络上，再用生成的包含了图片网络url的markdown标签替换本地图片标签。(3) 把word文件的后缀从.docx改成.zip, 解压后，在文件夹word的子文件夹media里能找到所有的本地文件。把这些本地文件全部上传到网站，生成下面这些url：我写了一个工具，可以把仅包含了本地图片标签的markdown源代码和包含了上述在线图片url标签的源代码做一个合并，后并后，本地图片标签会被在线图片标签取代：这个工具可以从我github上获得：https://github.com/i042416/Kn…下图就是我的原始PDF转换成markdown格式后发布在某社区上的效果，和原始PDF外观完全一致：要获取更多Jerry的原创文章，请关注公众号"汪子熙":