一个用 JavaScript 生成 PDF 的库。
您可以在 Twitter 上关注我:@MrRio 或访问我公司的网站进行咨询。
jsPDF 现在由图表专家 yWorks 共同维护。
推荐:从 npm 获取 jsPDF:
npm install jspdf --save
# or
yarn add jspdf
或者,从 CDN 加载它:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js " > </ script >
或者始终通过 unpkg 获取最新版本
< script src =" https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js " > </ script >
该包的dist
文件夹包含不同类型的文件:
core-js
导入所有必需的 polyfill,而 umd 变体是独立的。通常不需要在导入语句中指定确切的文件。构建工具或 Node 自动找出正确的文件,因此导入“jspdf”就足够了。
然后您就可以开始制作文档了:
import { jsPDF } from "jspdf" ;
// Default export is a4 paper, portrait, using millimeters for units
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;
如果您想更改纸张尺寸、方向或单位,您可以执行以下操作:
// Landscape export, 2×4 inches
const doc = new jsPDF ( {
orientation : "landscape" ,
unit : "in" ,
format : [ 4 , 2 ]
} ) ;
doc . text ( "Hello world!" , 1 , 1 ) ;
doc . save ( "two-by-four.pdf" ) ;
const { jsPDF } = require ( "jspdf" ) ; // will automatically load the node version
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; // will save the file in the current working directory
require ( [ "jspdf" ] , ( { jsPDF } ) => {
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;
} ) ;
const { jsPDF } = window . jspdf ;
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;
jsPDF 的某些功能需要可选的依赖项。例如html
方法,它依赖于html2canvas
,并且当提供字符串 HTML 文档时, dompurify
。 JsPDF 在需要时动态加载它们(使用相应的模块格式,例如动态导入)。像 Webpack 这样的构建工具会自动为每个可选依赖项创建单独的块。如果您的应用程序不使用任何可选依赖项,您可以通过将块定义为外部依赖项来阻止 Webpack 生成块:
// webpack.config.js
module . exports = {
// ...
externals : {
// only define the dependencies you are NOT using as externals!
canvg : "canvg" ,
html2canvas : "html2canvas" ,
dompurify : "dompurify"
}
} ;
在Vue CLI项目中,可以通过vue.config.js
文件的 configureWebpack 或 chainWebpack 属性定义外部(需要首先在新项目中创建)。
在Angular项目中,可以使用自定义 webpack 构建器来定义外部。
在React ( create-react-app
)项目中,可以通过使用react-app-rewired或弹出来定义外部。
jsPDF 可以像任何其他第三方库一样导入。这适用于所有主要工具包和框架。 jsPDF 还为 TypeScript 项目提供打字文件。
import { jsPDF } from "jspdf" ;
您可以将 jsPDF 添加到您的meteor项目中,如下所示:
meteor add jspdf:core
jsPDF 需要现代浏览器 API 才能运行。要在 Internet Explorer 等旧版浏览器中使用 jsPDF,需要使用 polyfill。您可以按如下方式加载所有必需的 polyfill:
import "jspdf/dist/polyfills.es.js" ;
或者,您可以加载预捆绑的 polyfill 文件。不建议这样做,因为您最终可能会多次加载 Polyfill。对于小型应用程序或快速 POC 来说可能仍然很实用。
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js " > </ script >
PDF 中的 14 种标准字体仅限于 ASCII 代码页。如果您想使用 UTF-8,则必须集成自定义字体,它提供所需的字形。 jsPDF 支持 .ttf 文件。因此,如果您想在 pdf 中包含中文文本,您的字体必须具有必要的中文字形。因此,请检查您的字体是否支持所需的字形,否则它将显示乱码而不是正确的文本。
要将字体添加到 jsPDF,请使用 /fontconverter/fontconverter.html 中的字体转换器。 fontconverter 将创建一个 js 文件,其中包含提供的 ttf 文件的内容作为 base64 编码字符串和 jsPDF 的附加代码。您只需将此生成的 js 文件添加到您的项目中即可。然后,您就可以在代码中使用 setFont-method 并编写 UTF-8 编码文本了。
或者,您可以使用fetch
或XMLHttpRequest
将 *.ttf 文件的内容作为二进制字符串加载,并将字体添加到 PDF 文件中:
const doc = new jsPDF ( ) ;
const myFont = ... // load the *.ttf font file as binary string
// add the font to jsPDF
doc . addFileToVFS ( "MyFont.ttf" , myFont ) ;
doc . addFont ( "MyFont.ttf" , "MyFont" , "normal" ) ;
doc . setFont ( "MyFont" ) ;
自从与 yWorks 分支合并以来,出现了很多新功能。然而,其中一些是 API 破坏,这就是为什么在两种 API 模式之间存在 API 切换:
您可以通过调用在两种模式之间切换
doc . advancedAPI ( doc => {
// your code
} ) ;
// or
doc . compatAPI ( doc => {
// your code
} ) ;
回调运行后,JsPDF 会自动切换回原来的 API 模式。
请检查您的问题是否已在 Stackoverflow https://stackoverflow.com/questions/tagged/jspdf 得到处理。请随时使用标签jspdf
提问。
功能请求、错误报告等都是非常受欢迎的问题。请注意,错误报告应遵循以下准则:
jsPDF 的生存离不开社区的帮助!如果您认为缺少某个功能或发现了错误,请考虑是否可以抽出一两个小时来准备拉取请求。如果您只是对这个项目感兴趣并想提供帮助,请查看未解决的问题,尤其是那些标有“bug”的问题。
您可以在贡献指南中找到有关构建和测试 jsPDF 的信息
版权所有 (c) 2010-2021 James Hall,https://github.com/MrRio/jsPDF (c) 2015-2021 yWorks GmbH,https://www.yworks.com/
特此免费授予获得本软件和相关文档文件(“软件”)副本的任何人不受限制地使用本软件,包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或销售软件的副本,并允许向其提供软件的人员这样做,但须满足以下条件:
上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。
本软件按“原样”提供,不提供任何明示或暗示的保证,包括但不限于适销性、特定用途的适用性和不侵权的保证。在任何情况下,作者或版权持有者均不对因本软件或本软件中的使用或其他交易而产生或与之相关的任何索赔、损害或其他责任负责,无论是合同、侵权行为还是其他行为。软件。