精华内容
下载资源
问答
  • jspdf
    千次阅读
    2021-10-07 16:31:13

    jsPDF

    在这里插入图片描述

    Github仓库:https://github.com/MrRio/jsPDF
    项目首页:github.com/mrrio/jspdf
    查看原文请前方官方网站文档
    官网

    安装

    从npm获取jsPDF:

    npm install jspdf --save
    # or
    yarn add jspdf
    

    或者,从CDN加载它:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    

    或者始终使用最新版本的Viaunpkg

    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
    

    此软件包的Dist文件夹中包含不同类型的文件

    • jspdf.es.*.js: 现代ES2015模块格式。
    • jspdf.node.*.js: 用于在Node.js中运行。使用文件操作加载/保存文件,而不是使用浏览器API.
    • jspdf.umd.*.js: UMD 模块格式。 用于 AMD 或脚本标签加载。
    • polyfills*.js:Internet Explorer等旧浏览器所需的兼容文件。ES变体只需从 core-js导入所有必需的polyfill,UMD 版本是独立的。

    通常不需要在import语句中指定确切的文件。构建工具或节点会自动找到正确的文件,所以导入“jspdf”就足够了

    使用

    然后,您就可以开始制作文档了:

    import { jsPDF } from "jspdf";
    
    // 默认导出为a4纸张,纵向,单位为毫米
    const doc = new jsPDF();
    
    doc.text("Hello world!", 10, 10);
    doc.save("a4.pdf");
    

    如果要更改纸张大小、方向或单位,可以执行以下操作:

    // 横向输出,2×4英寸
    const doc = new jsPDF({
      orientation: "landscape",
      unit: "in",
      format: [4, 2]
    });
    
    doc.text("Hello world!", 1, 1);
    doc.save("two-by-four.pdf");
    

    在Node.js中运行

    const { jsPDF } = require("jspdf"); // 将自动加载节点版本
    
    const doc = new jsPDF();
    doc.text("Hello world!", 10, 10);
    doc.save("a4.pdf"); // 将文件保存在当前工作目录中
    

    其他模块格式
    AMD

    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: {
        // 仅定义不用作外部的依赖项!
        canvg: "canvg",
        html2canvas: "html2canvas",
        dompurify: "dompurify"
      }
    };
    

    Vue CLI项目中,可以通过Vue.config.jsfile的ConfigureWebPackchainWebpack定义外部(首先需要在新项目中创建)。
    Angular项目中,可以使用自定义网页包生成器定义外部。
    React(create-react-app)项目中,可以使用react-app-rewiredor-ejecting来定义外部。

    TypeScript/Angular/Webpack/React/etc. 配置:

    jsPDF可以像任何其他第三方库一样导入。这适用于所有主要的工具包和框架。jsPDF还为TypeScript项目提供了键入文件。

    import { jsPDF } from "jspdf";
    

    您可以将jsPDF添加到meteor项目中,如下所示:

    meteor add jspdf:core
    

    Polyfills
    jsPDF需要现代浏览器API才能正常工作。要在旧浏览器(如Internet Explorer)中使用jsPDF,需要使用polyfills 。可以按如下方式加载所有必需的polyfills :

    import "jspdf/dist/polyfills.es.js";
    

    或者,您可以加载预绑定的polyfill文件。不建议这样做,因为您可能会多次加载polyfills。对于小型应用程序或快速POC来说,可能仍然是不错的选择。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/polyfills.umd.js"></script>
    

    Unicode字符/UTF-8的使用:

    PDF中的14种标准字体仅限于ASCII代码页。如果你想使用UTF-8,你必须集成一个自定义字体,提供所需的字形。jsPDF支持.ttf文件。因此,如果您想在pdf中包含例如中文文本,您的字体必须具有必要的中文字形。因此,请检查您的字体是否支持所需的字形,否则它将显示乱码字符而不是正确的文本。

    要将字体添加到 jsPDF 中,请使用我们的 fontconverter。fontconverter将创建一个js文件,其中提供的ttf文件的内容转换为base64编码字符串和jsPDF的附加代码。您只需将生成的js文件添加到项目中。然后,您就可以在代码中使用setFont方法并编写UTF-8编码的文本了。

    const doc = new jsPDF();
    
    const myFont = ... // 将*.ttf字体文件作为二进制字符串加载
    
    // 将字体添加到jsPDF
    doc.addFileToVFS("MyFont.ttf", myFont);
    doc.addFont("MyFont.ttf", "MyFont", "normal");
    doc.setFont("MyFont");
    

    高级功能
    自从与yworksfork合并以来,有很多新特性。但是,其中一些正在破坏API,这就是为什么在两种API模式之间存在API切换:

    • 在 compat API 模式下,jsPDF 具有与 MrRio 的原始版本相同的 API,这意味着与插件完全兼容。然而一些高级特性,如转换矩阵和模式将无法工作。这是默认模式。
    • 在 advanced API 模式下,jsPDF 拥有从 yWorks-fork 版本中使用的 API。这意味着所有高级特性,如模式、FormObjects 和 转换矩阵的可用性。

    您可以通过调用

    doc.advancedAPI(doc => {
      // your code
    });
    // or
    doc.compatAPI(doc => {
      // your code
    });
    

    运行回调后,jsPDF将自动切换回原始API模式。

    更多相关内容
  • jsPDF模板这是一个简单的ES6 Webpack设置中的样式化的发票模板 。 包含以提供更好的SVG支持。 这也是软件包必须替换原始软件包的原因。 这里有一个。发行版对于更简单的用法,我建议参考本开发的。 它不使用jspdf-...
  • jsPDF-AutoTable-jsPDF的表格插件 用Javascript生成PDF表 这个jsPDF插件增加了通过解析HTML表或直接使用Javascript数据生成PDF表的功能。 查看或。 安装 通过执行以下操作之一来获取jsPDF和此插件: npm install ...
  • jspdf-React 安装 npm install --save jspdf-react :warning: 注意:使用 CSS-in-JS、Styled-Component 或情感。 如果您想将 html 转换为 pdf,我建议使用该库。 用法 import React , { Component } from 'react...
  • 使用jspdf生成pdf报表

    2020-12-08 19:35:54
    由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: ...前提:jsPDF 支持h
  • jsPDF现在由共同维护。 | 安装 推荐:从npm获取jsPDF: npm install jspdf --save # or yarn add jspdf 或者,从CDN加载它: < script src =" ...
  • jspdf.debug.zip

    2021-09-01 14:37:49
    导出pdf用的js资源
  • jspdf.debug.js

    2020-10-10 14:53:47
    基于html2canvas jspdf导出更加清晰的图片以及pdf document.getElementById("btn").onclick = function() { let cont=document.getElementById('postersbg'); html2canvas(cont, { onrendered: function(canvas) ...
  • jsPDF导出pdf示例

    2020-10-26 00:06:49
    主要介绍了jsPDF如何导出pdf,不过其貌似不支持中文,需要的朋友可以参考下
  • jsPdf.debug.js

    2020-12-10 16:13:13
    jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。 前两天做了一个在线制作问卷的网页,需要将设计好的问卷下载下拉,想到pdf格式比较稳定,就使用了jsPDF来生成文档,
  • 解决jspdf导出pdf中文乱码,详细说明地址:https://blog.csdn.net/jinggaoniao/article/details/108751020
  • html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案,设置背景色为白色,然后转成图片后,获取截断处图片像素点,从截断处往上一行行扫描像素点颜色,碰到这一行颜色都是全白的,代表是从这里开始截断,...
  • jspdf_1.5.3.zip

    2019-11-27 10:19:39
    jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档,该文件包含jspdf.debug.js和jspdf.min.js,版本为1.5.3,需要的朋友可以下载使用。
  • 使用js下载pdf所需js资源(html2canvas 和 jsPDF
  • jspdf.js和demo

    2019-02-19 09:13:58
    jspdf.js和demo,jspdf.js,jspdf.min.js,pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件。 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核心解析...
  • JsPDF插件在pdf中插入html表格 从表格 HTML 元素以 PDF 格式呈现表格。 它根据元素位置进行渲染,并尝试维护与表相关的重要 css 属性。 截至今天:支持矩形边框。 支持背景颜色。 支持溢出:隐藏。 支持显示:无和...
  • jspdf.min.js

    2021-06-02 18:02:04
    pdf下载,可以将页面转换成pdf并且下载,两个文件,1个pdf.js,另一个html2canvas.js
  • jsPDF-上下文插件使用jsPDF制作自定义上下文的插件。 上下文是可以单独或继承设置属性(TextColor,DrawColor,Font,FontSize ...)的区域。用法您需要在上下文之前包含jsPDF。 < script src =" ./script/jspdf....
  • jsPDF也已导出,因此无需单独导入jsPDF就可以使用它。) 从头开始创建PDF是一场噩梦(至少对我而言)。 在某些项目中,我们需要使用js来生成各种PDF,并且大多数情况下它们是发票PDF文件。 我创建的这个项目是...
  • jsPDF-CustomFonts-support, 向jsPDF添加自定义字体支持 jsPDF-CustomFonts-support JsPDF是一个开源,它在HTML5环境中加载JavaScript并创建一个pdf文档。当前版本不支持自定义字体。 我将尝试实现这里功能。演示它...
  • 运用jquery将html转换为pdf所用到的插件。 jspdf.debug.js和html2canvas.js
  • html2canvas.js+jspdf.debug.js资源文件,前端pdf打印
  • 这是一个带有jsPDF图像支持插件的示例应用程序,该应用程序允许您将Titanium中的jsPDF库与图像一起使用,当通常与Titanium一起使用时,这些当前不随jsPDF提供。 该版本目前被认为是预发行版本。 重要的提示 PDF规范...
  • jspdf源文件

    2018-05-23 10:55:23
    可以直接下载下来就可以下载文件为PDF,具体怎么使用可以直接看我的博客,里面以后详细的叙述。
  • jsPdf.debug.zip

    2020-07-29 19:18:50
    pdf插件
  • jsPDF:https 副本

    2021-06-13 21:35:57
    #jsPDF 在客户端 JavaScript 中生成 PDF 文件。 你可以: 或前往进行咨询。 创建您的第一个文档 参见示例/basic.html。 index.html 中有一个实时编辑器示例。 var doc = new jsPDF ( ) ; doc . text ( 20 , 20 ,...
  • jspdf支持分页和清晰度处理DEMO

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,807
精华内容 1,522
关键字:

jspdf

友情链接: editplus.zip