相关文章推荐
谈吐大方的甘蔗  ·  基于深度学习的高分辨率重建上采样算法总结_特 ...·  1 月前    · 
近视的眼镜  ·  找不到tokio：：主宏？-腾讯云开发者社区 ...·  1 年前    · 
知识渊博的跑步鞋  ·  header pandas-掘金·  1 年前    · 
阳刚的橙子  ·  如何使用多个Java代理启动java程序？- ...·  1 年前    · 
乖乖的橡皮擦  ·  Day 13 ─用Kotlin ...·  1 年前    · 
Code  ›  使用 jsPDF 创建 PDF 文档_allway2的博客
https://blog.csdn.net/allway2/article/details/121596232
温文尔雅的甜瓜
1 年前

在上一篇文章 使用 PDF.js 库显示 PDF 文件中， 我们展示了如何在 HTML 画布上显示 PDF 文件。在本文中，我们将展示如何从头开始创建 PDF 文件。我们将使用 jsPDF 图书馆为此目的。您可以仅从 GitHub 存储库 下载最新的库版本或者从 官网 . 不幸的是，该库的文档很差，所以我们将描述最重要的 API。

我们必须下载最新版本的库并将其包含在 HEAD 部分。

<script src="jspdf.umd.min.js"></script> </head>

完成后，我们可以开始使用 jsPDF 库。

jsPDF 库 API

首先让我们讨论如何创建一个新文档。就像执行这段代码一样简单。 

var doc = new jsPDF(orientation, unit, format, compress);

构造函数可以接受多个参数。
 

  • 方向-方向的默认值为"portrait"。如果我们想要不同的页面方向，我们可以将其设置为“横向”。
  • unit - 我们可以告诉 jsPDF 我们想要在哪个单元中工作。使用以下选项之一：“pt”（点）、“mm”（默认）、“cm”、“in”。
  • 格式- 这是默认的页面格式。它可以是"a3"、"a4"（默认）、"a5"、"letter"、"legal"。
 

我们可以使用以下代码添加新页面。
 

doc.addPage(width, height);
 

作为参数，我们以文档构造函数中定义的单位传递页面、宽度和高度。添加页面会将我们移动到此页面，因此任何操作都将在该页面上执行。如果我们想转到另一个页面，我们可以使用 setPage函数。
 

doc.setPage(pageNumber);

您还可以使用此代码获取实际页码。
 

doc.internal.getNumberOfPages();
 

示例应用程序中的第一个示例演示了上述函数的用法。您可以运行应用程序来检查它并调查文章所附的应用程序代码。
 

首先，最重要的是显示文本，我们使用带有3 个参数的 doc.text函数来完成。前两个是文档构造函数中定义的单位中文本的 X 和 Y 位置。请注意，Y 位置是文本基线的位置，因此在 Y 位置设置为 0 的情况下打印某些内容实际上会将其打印在文档的顶部边缘。第三个参数是要显示的文本。
 

doc.text(10, 10, "Hello world!");
 

第二件事是用于绘制文本的字体名称。我们可以选择以下之一：courier、helvetica、time。我们通过运行doc.setFont函数来更改字体系列和字体样式 。
 

doc.setFont("courier", "italic");

通过执行 doc.getFontList函数，我们可以找出可用的字体以及可以为给定字体设置的字体样式。
 

doc.getFontList();
    "helvetica": ["normal", "bold", "italic", "bolditalic"],
    "Helvetica": ["", "Bold", "Oblique", "BoldOblique"],
    "courier": ["normal", "bold", "italic", "bolditalic"],
    "Courier": ["", "Bold", "Oblique", "BoldOblique"],
    "times": ["normal", "bold", "italic", "bolditalic"],
    "Times": ["Roman", "Bold", "Italic", "BoldItalic"]

由于doc.setFontStyle或 doc.setFontType函数，我们还可以单独更改字体样式 ，这是第一个的别名。
 

doc.setFontType("bolditalic");
// is the same as calling
doc.setFontStyle("bolditalic");
 

接下来是字体大小。这就像调用文档一样简单 。setFontSize函数。
 

doc.setFontSize(40);
 

最后一件事是文本颜色。我们使用doc.setTextColor函数更改文本颜色 并传递三个参数，即 RGB（红、绿、蓝）颜色值。
 

doc.setTextColor(255, 0, 0);
 

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <title>Hello world</title>
    </head>
        <h1>Hello world</h1>
        <script type="text/javascript" src="dist/jspdf.umd.min.js"></script>
        <script type="text/javascript">
            var pdf = new jspdf.jsPDF();
            pdf.text(30, 30, 'Hello world!');
            pdf.save('hello_world.pdf');
        </script>
    </body>
</html>
 

图像的唯一功能是 doc.addImage。它将图像作为第一个参数，图像格式/类型作为第二个参数，图像的 X、Y 位置作为第三和第四个参数。我们还可以选择将新图像大小作为第五个和第六个参数传递。
 

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <title>Hello world</title>
    </head>
        <h1>Hello world</h1>
        <script type="text/javascript" src="dist/jspdf.umd.min.js"></script>
        <script type="text/javascript">
            var img = new Image();
            img.src = 'bird.jpg';
            var doc = new jspdf.jsPDF('p', 'mm', 'a3');
            doc.addImage(img, 'JPEG', 100, 100);
            doc.save("bird.pdf");
        </script>
    </body>
</html>
 

在上面的例子中，我们传递了一个 Image HTML DOM 元素作为addImage函数的第一个参数 ，但是它也可以是一个 base64 编码的图像字符串。目前，唯一支持的图像格式是 jpeg/jpg 和 png。
 

首先，我们必须设置绘制的形状填充和描边颜色。我们相应地使用doc.setFillColor和 doc.setDrawColor来完成它 ，将 RGB 颜色值作为参数传递。
 

doc.setFillColor(100, 100, 240);
doc.setDrawColor(100, 100, 0);
 

我们还可以设置笔画宽度。笔画宽度单位与文档构造函数中定义的相同。
 

doc.setLineWidth(1);

每个形状绘制函数都将中心点坐标（三角形是唯一的例外）作为两个第一个参数。他们还采用了最后一个参数绘制风格。可以是"S" , "F" , "DF" , "FD"字符串，含义为："stroke"、"fill"、"stroke and fill"、"fill and stroke"。最后两个当然在绘图操作的顺序上有所不同。
 

我们可以通过传递两个半径来绘制一个椭圆...
 

// Empty ellipse
doc.ellipse(50, 50, 10, 5);
// Filled ellipse
doc.ellipse(100, 50, 10, 5, 'F');
// Filled circle with borders
 

...或一个圆，只通过一个半径...
 

doc.circle(150, 50, 5, 'FD');
 

...或矩形，通过传递其宽度和高度...
 

// Empty square
doc.rect(50, 100, 10, 10);
// Filled square
doc.rect(100, 100, 10, 10, 'F');
// Filled square with borders
doc.rect(150, 100, 10, 10, 'FD');
 

... 一个圆角矩形，通过其宽度、高度和边框半径...
 

// Filled sqaure with rounded corners
doc.roundedRect(50, 150, 10, 10, 3, 3, 'FD');
 

...和一个三角形，通过传递每个角坐标。
 

// Filled triangle with borders
doc.triangle(50, 200, 60, 200, 55, 210, 'FD');
 

我们还可以绘制通过两点坐标的线。
 

// Line
doc.line(50, 250, 100, 250);
 

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <title>Hello world</title>
    </head>
        <h1>Hello world</h1>
        <script type="text/javascript" src="dist/jspdf.umd.min.js"></script>
        <script type="text/javascript">
            var doc = new jspdf.jsPDF('p', 'mm', 'a3');
            doc.setFillColor(100, 100, 240);
            doc.setDrawColor(100, 100, 0);
            doc.setLineWidth(1);
// Empty ellipse
            doc.ellipse(50, 50, 10, 5);
// Filled ellipse
            doc.ellipse(100, 50, 10, 5, 'F');
// Filled circle with borders
            doc.circle(150, 50, 5, 'FD');
            // Empty square
            doc.rect(50, 100, 10, 10);
// Filled square
            doc.rect(100, 100, 10, 10, 'F');
// Filled square with borders
            doc.rect(150, 100, 10, 10, 'FD');
            // Filled sqaure with rounded corners
            doc.roundedRect(50, 150, 10, 10, 3, 3, 'FD');
            // Filled triangle with borders
            doc.triangle(50, 200, 60, 200, 55, 210, 'FD');
            // Line
            doc.line(50, 250, 100, 250);
            doc.save("jspdf-draw.pdf");
        </script>
    </body>
</html>
 

在本文中，我们描述了使用 jsPDF 库创建 PDF 文档的过程。这是一个简单而强大的工具，仍在开发中，因此预计很快就会出现新的强大功能。

                    介绍在上一篇文章使用 PDF.js 库显示 PDF 文件中，我们展示了如何在 HTML 画布上显示 PDF 文件。在本文中，我们将展示如何从头开始创建 PDF 文件。我们将使用jsPDF图书馆为此目的。您可以仅从GitHub 存储库下载最新的库版本或者从官网.不幸的是，该库的文档很差，所以我们将描述最重要的 API。先决条件我们必须下载最新版本的库并将其包含在 HEAD 或 BODY 部分的末尾。&lt;head&gt;    &lt;script src="js/jspdf.js"&.
				
介绍一下纯jspdf用法，将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置
jsPDF 是一个基于HTML5的客户端解决方案，用于生成各种用途的 PDF 文档。
官网地址：https://rawgit.com/MrRio/jsPDF/master/docs/
1、安装：npm install jspdf
2、引入：import jsPDF from "jspdf"
3、使用：
let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);
4.将pdf的宽高设置为canvas的宽高（不适用A4纸大小）
5.将canvas转为图片
6.实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
如截断则设置A4纸大小即可
target  容器
pdfName  文件名
function exp

export function ExportSavePdf(htmlTitle, currentTime) {
  var element = document.getElementById('pdfCentent')
  html2canvas(element, {
    logging: false
  }).then(function(can.
				
jsPDF 是一个免费的 JavaScript 类库，可以用来创建 PDF 文件，不需要服务器端支持。它支持文本（含格式），画图和图片。
      jsPDF 是一个使用Javascript语言生成PDF的开源库。你可以在Firefox插件，服务端脚本或是浏览器脚本中使用它。
      客户端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等。IE暂不支持。

				
output在新的窗口显示在本页面插入文件名称设置
使用jspdf生成的pdf文档，网上一般都是如何下载到本地中，使用save()方法，但是现在并不想下载，而是直接显示在页面中。
output
查找了官方文档，发现可以使用output方法：
output(type, options) → {string|window|ArrayBuffer|Blob|jsPDF|null|undefined}
源码:  jspdf.js, line 3010
生成PDF文档。
若类型参数未定义，则输出是以字符串作为.

				
JSPDF.JS引入中文字库引入jspdf.js写个简单的例子添加中文字库（ttf转js）直接引入ttf文件（未完成）
引入jspdf.js
github地址：https://github.com/MrRio/jsPDF
引入在线的库
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js...
 
推荐文章
谈吐大方的甘蔗  ·  基于深度学习的高分辨率重建上采样算法总结_特征重排上采样-CSDN博客
1 月前
近视的眼镜  ·  找不到tokio：：主宏？-腾讯云开发者社区-腾讯云
1 年前
知识渊博的跑步鞋  ·  header pandas-掘金
1 年前
阳刚的橙子  ·  如何使用多个Java代理启动java程序？-腾讯云开发者社区-腾讯云
1 年前
乖乖的橡皮擦  ·  Day 13 ─用Kotlin 做貓咪圖片滑頁 (下) ViewPager、getIdentifie - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   藏经阁   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号