在我们的CSS中,页面大小以像素表示:600px和768px。一英寸有96个像素。在PDF中,测量单位以用户单位表示。默认情况下,一个用户单位对应一个点。一英寸有72个点。参见itext常见问题解答条目——HTML中的测量系统如何与PDF中的测量体系相关?以获得更深入的答案。
在我们示例的CSS文件中定义的边界上下文中,我们可以计算以下宽度:
- 600px(像素)=6.25inch(英寸)=450pt(磅)
- 768px(像素)=8inch(英寸)=576pt(磅)
在定义页面大小时,我们要使用450pt和579pt的值。
如图3.6所展示的是使用宽度大于576pt的媒体查询将SXSW HTML页面转换为PDF时生成的PDF。
图3.6 桌面屏幕的SXSW PDF
这个PDF看起来非常类似于图3.5所示的HTML页面的“宽视图”。
现在让我们创建一个页面宽度较小的PDF。
在下面的代码中,我们定义的自定义页面大小小于576,但大于450。
public void createPdf(String baseUri, String src, String dest) throws IOException {
PdfWriter writer = new PdfWriter(dest);
PdfDocument pdf = new PdfDocument(writer);
pdf.setTagged();
PageSize pageSize = new PageSize(575, 1500);
pdf.setDefaultPageSize(pageSize);
ConverterProperties properties = new ConverterProperties();
properties.setBaseUri(baseUri);
MediaDeviceDescription mediaDeviceDescription
= new MediaDeviceDescription(MediaType.SCREEN);
mediaDeviceDescription.setWidth(pageSize.getWidth());
properties.setMediaDeviceDescription(mediaDeviceDescription);
HtmlConverter.convertToPdf(new FileInputStream(src), pdf, properties);
这个代码段与前一个代码段之间的唯一区别可以在第5行找到。我们现在使用575pt×1500pt的自定义页面大小,而不是横向的A4页面。
图3.7 平板电脑屏幕下的SXSW PDF
如图3.7所示的最终PDF看起来非常像我们在图3.4中看到的HTML。
最后,让我们再次更改页面大小,现在宽度小于450pt。
让我们创建一个页面大小为440*2000用户单位的PDF。代码如下所示:
public void createPdf(String baseUri, String src, String dest) throws IOException {
PdfWriter writer = new PdfWriter(dest);
PdfDocument pdf = new PdfDocument(writer);
pdf.setTagged();
PageSize pageSize = new PageSize(440, 2000);
pdf.setDefaultPageSize(pageSize);
ConverterProperties properties = new ConverterProperties();
properties.setBaseUri(baseUri);
MediaDeviceDescription mediaDeviceDescription
= new MediaDeviceDescription(MediaType.SCREEN);
mediaDeviceDescription.setWidth(pageSize.getWidth());
properties.setMediaDeviceDescription(mediaDeviceDescription);
HtmlConverter.convertToPdf(new FileInputStream(src), pdf, properties);
现在,我们在两个长而窄的PDF页面上看到了所有内容,字体大小远远大于于以前。
图3.8 智能手机屏幕下的SXSW PDF
这种PDF在智能手机上比在横向A4页面上呈现的PDF更容易使用。
当查看最后三个示例的代码时,你可能会好奇一行奇怪的代码:在第4行,我们告诉iText创建一个带标签的PDF。
由于这一额外的代码行,iText还将把文档的语义结构添加到PDF中。
之前我们已经解释了HTML和PDF之间存在巨大的概念差异。在HTML中,可以有标题(<h1>
、<h2>
、…)、段落(<p>
)、列表和列表项(<ul>
、<ol>
、<li>
)等结构。浏览器会查看这些结构并实时呈现页面。
创建PDF文件时,pdfHTML会解释这些结构,将其转换为iText对象,然后iText通过在画布上的绝对位置绘制文本、线条和形状将这些对象渲染到页面上。如果不使用setTagged()
/setTagged()
方法,所有结构都将在该过程中丢失。PDF页面上的一行文本不知道它是章节的标题,是段落的一部分,还是列表项。这些信息不见了。一页上只有一堆文字。
然而,当你使用setTagged()
/setTagged()
方法时,会向PDF中添加一个结构树。在图3.9中,我们在Adobe Acrobat中看到了该结构树的一部分。你可以识别<Div>
、<P>
、<L>
和<LI>
元素。
图3.9 PDF的结构与其布局无关
在第1章的图1.5中,我们还发现了<Span>
和<figure>
等元素。这些是PDF文档的标签,存储在PDF文件的单独结构树中。该结构树指的是不同页面上的标记内容。当辅助技术(Assistive Technology,AT)使用PDF时,此结构非常重要。当这种结构存在时,盲人或视障人士可以读懂文档。
辅助技术是一个总称,包括残疾人的辅助、适应和康复设备,还包括选择、定位和使用这些设备的过程。辅助技术通过增强或改变完成这些任务所需的技术的交互方法,使人们能够完成以前无法完成或难以完成的任务,从而促进了更大的自身独立性。
带标签的PDF在下一代PDF中也很重要。下一代PDF规范将定义一种派生算法(derivation algorithm ),允许PDF处理器将PDF文档转换为响应HTML文件。通过提供创建正确标签的PDF的功能,我们准备在规范完成后支持下一代PDF。一旦实现,我们就可以将HTML转换为PDF,然后再转换回来!
我们将在下一章讨论PDF/A时重温带标签的PDF。
在本章中,我们创建了一个响应的HTML文件,并通过定义不同的媒体查询将该文件转换为不同的PDF文档。我们创建了一个PDF,它使用了一个专门为打印HTML文件而编写的CSS文件。我们还使用了媒体查询,使内容适应屏幕宽度。在下一章中,我们将了解使用pdfHTML作为报告引擎时的一些示例和最佳实践。
iText7高级教程之html2pdf教程源码下载-CSDN
本章代码资源下载地址:
- 关注我的微信公众号CuteXiaoKe,点击代码资源-iText官网代码即可
- 或者直接点击微信文章
html2pdf.js 可以直接将页面 转为canvas 图像,然后生成pdf。所以 没有中文乱码的问题。但是 由于是canvas ,所以肯定会 出现分辨率的问题。不考虑 文件大小的话,可以把分辨率调高。
和将该文件转换为 PDF。当您查阅类 的 API 文档时,您会发现这些方法的更多变体。在下一章中,我们将选择其中一种方法来转换不同的 HTML 文件。这些 HTML 文件中的每一个都将以不同的方式使用 CSS。
电商项目中,经常会遇到导出为PDF的功能,最最简单的方式就是:window.print(),可以自动展示出当前页面的打印预览效果。
如果使用:window.print()实现打印,我们可以通过在浏览器控制台测试一下效果:
效果如下所示:
这种情况window.print()适用于全屏页面的,而非弹窗的形式,如果要只打印弹窗部分,则需要用其他的方式:
html2pdf实现导出html页面为pdf
1.npm install html2canvas jspdf --save——安装插件到package.j
在前一章中,我们使用了不同的Java代码片段。 在本章中,我们将对每个示例使用相同的代码片段:
我们不看不同的Java代码片段,而是看不同的HTML和CSS片段。 在第一个实例中,我们通过使用诸如和的html标签,将样式定义为斜体和不同的字体大小,HTML代码如下:
基于该HTML文件创建的HTML页面和PDF如图2.1所示。 我们称之为老式的——有些人认为很low——因为现在HTML只用于定义内容及其结构。现在,所有样式(如宽度、高度、字体选择、字体大小、字体颜色、字体粗细等)都是使用层
itext7的一些简单操作(二维码、水印、表格、HTML代码生成PDF)
itext7解决中文显示问题有两种解决方式:
1 引入对应的语言包,火狐浏览器预览生成的pdf可能存在部分中文乱码问题,同时因为加载了语言包,生成的pdf更大
使用NotoSansCJKsc-Regular.otf,同时在pom中引入com.itextpdf.font-asian包.
2 设置字体:通过默认字体生成,pdf文件和html大小几乎相同,不存在浏览器预览乱码问题
PdfFont font = PdfFontFactory.createFont("STSongStd-Light", "UniGB-UCS2-H", false);
HtmlToPdf类由于将html页面全部在一个pdf中输出,造成水印无法使用,欢迎各位参与解决!
本文是在其他人的基础上整理而来,原始访问链接:
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = c
假设有一个可以用作公司信纸的单页PDF文档,请参见图4.4中左侧的PDF。假设我们想在从HTML创建的PDF的背景中添加此单页,请参见右侧的PDF。假设我们还想不用以@page规则的方式添加页码。例如,请参见生成的PDF第一页上的白色大数字1。图4.4 使用单页PDF作为公司信纸iText7高级教程之构建基础块——7.处理事件,设置阅读器首选项和打印属性里面阐释的方法可以帮我们满足这个需求,你可看通过使用事件处理器来做到。在下面的代码中,我们创建了的实现,名叫Background。
项目中用到使用html转pdf功能,将开发过程中,几个主要功能提炼出来,分享给大家并有github例子,clone下来配置好jdk就能直接跑例子,代码和逻辑也超简单,一看就能明白。
环境配置:
jdk1.8.0_77 idea win10
htmlpdf版本如下
<dependencies>
<dependency&...
html2pdf(html转换pdf),
html2canvas+jspdf+pdfmake+jquery
页面直接html生成pdf文件,避免了,过多人下载pdf,消耗服务器资源的一个解决方案。如果并发量大的情况下,很好的解决了服务器的压力。
自己研究了好长时间终于搞定了
html2pdf 是基于 html2canvas和 jsPDF 开发的将 html 页面导出成 pdf 文件的插件,通过配置 opt 相关选项,可以自定义导出的选项,最近在使用 html2pdf 的时候,发现页面中的 img 图片导出的图案是空白的,查阅了相应的 issue 发现可以通过相关配置解决这个问题,这里做下记录。【问题重现】需要导出成pdf的的页面部分如下:页面中的头像对应的标签如下:...
公司最近有做做Java导出pdf的需求,因为之前没有做过的缘故,所以从网上找来了itextpdf的包,前期做的还是非常顺利的,本地测试都是非常的顺利,正当我以为导出pdf如此简单的时候,上Linux测试就踩了大坑。
<!-- 字符串转pdf -->
<dependency>
<groupId>com.itextpdf</groupId>
<artifactId&g...
一,html2pdf—html页面下载pdf文件
需求:html2pdf—html页面下载pdf文件
使用的插件js是html2pdf.js,html2pdf官方链接地址,
按照官方的说明,直接调用save方法就可以。
var element = document.getElementById('element-to-print');
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'j