使用 JavaScript 将 HTML 转换为 PDF

更多相关学习资料参见http://www.pdfdownload.cn/b/ba_index.php

在本文中，我们将了解如何在浏览器（即完全在客户端）中生成任何 HTML 元素的 PDF。

我们将使用该包html2pdf生成 PDF。

html2pdf是使用html2canvas的HTML元素转换为画布，然后进入图像。然后它在 的帮助下生成图像的 PDF jsPDF。

要了解更多信息，请查看这里。

执行

让我们看看包的一个小实现html2pdf。

索引.html

一个基本的 HTML 页面，其中包含包的捆绑链接。

创建了一个简单内容的 div 块和一个导出 PDF 按钮。我们将生成一个 div 的 PDF，其 id 是view单击导出 PDF 按钮。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML2PDF</title>

    <script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js" defer></script>

    <script src="./script.js" defer></script>

</head>

<body onload="main()" align="center">

    <div id="view" align="center">

        <h1>Export PDF</h1>

        <h3>Using HTML2PDF</h3>

    </div>

    <button id="export-pdf">Export PDF</button>

</body>

</html>

　　

脚本.js

包含 main 方法的 JavaScript 文件，一旦站点加载并侦听onclick导出 PDF 按钮上的事件，就会调用该方法。

单击导出 PDF 按钮时，html2pdf将调用该方法，该方法将元素 (div) 的引用作为其参数。

function main() {

    var view = document.getElementById("view");

    var exportPDF = document.getElementById("export-pdf");

    exportPDF.onclick = (e) => html2pdf(view);

}

　　

单击按钮后，将生成 PDF 并直接下载到您的系统。

我们还可以在html2pdf方法中传递一些配置选项来处理图像类型、质量、文件名等。要了解更多信息，请查看这里。

注意：基于图像的 PDF 是不可搜索的。

使用 JavaScript 将 HTML 转换为 PDF的更多相关文章

  1. 关于html转换为pdf案例的一些测试与思考

    由于工作所需,最近花时间研究了html转换为pdf的功能.html转换为pdf的关键技术是如何处理网页中复杂的css样式,通过在网上收集资料,发现目前html 转换为pdf的解决方案主要分为三类: 客 ...

  2. C# 使用 wkhtmltopdf 把HTML文本或文件转换为PDF

    一.简介 之前也记录过一篇关于把 HTML 文本或 HTML 文件转换为 PDF 的博客,只是之前那种方法有些局限性. 后来又了解到 wkhtmltopdf.exe 这个工具,这个工具比起之前的那种方 ...

  3. 在禅道中实现WORD等OFFICE文档转换为PDF进行在线浏览

    条件: 安装好禅道的服务器 能直接浏览PDF的浏览器(或通过 安装插件实现 ) 文档转换服务程序(建议部署在另一台服务器上)     实现 原理: 修改禅道的文件预览功能(OFFICE文档其使用的是下 ...

  4. wkhtmltopdf 将网页转换为PDF和图片

    wkhtmltopdf 是一个shell工具,它使用了WebKit渲染引擎和Qt,将网页html转换为pdf的强大工具,转换后的pdf也可以通过pdf工具进行复制.备注.修改 官网下载地址:http: ...

  5. 上传Text文档并转换为PDF(解决乱码)

    前些日子,Insus.NET有分享一篇<上传Text文档并转换为PDF>http://www.cnblogs.com/insus/p/4313092.html 它是按最简单与默认方式来处理 ...

  6. 上传Text文档并转换为PDF

    今天在ASP.NET MVC环境中学习一些PDF相关的知识,想法是上传文件成功时,并把文件转换为PDF文档. 打开你的专案,运行NuGet包管理器,下载一个叫iTextSharp的东东: 点击Inst ...

  7. Javascript的一个生产PDF的库： unicode和中文问题的解决

    Javascript的一个生产PDF的库: unicode和中文问题的解决基于canvas和jspdf库, 实现用javascript的支持中文pdf生成实用工具.参考:http://javascri ...

  8. winform实现word转换为PDF(.doc)

    注意:实现word转换为PDF文件,本人安装Office为2013; word以后缀为.doc为例实现文件类型转换,具体方式如下所示: 实现步骤: 1.添加命名空间引用——using Microsof ...

  9. C#实现office文档转换为PDF或xps的一些方法( 转)

    源博客http://blog.csdn.net/kable999/article/details/4786654 代码支持任意office格式 需要安装office 2007 还有一个office20 ...

随机推荐

  1. Day17_100_IO_FileWriter文件字符输入流

    FileWriter文件字符输入流 继承结构 Java.lang.Object - java.io.Writer; 抽象类 java.io.OutputStreamWriter; <转换流: 将 ...

  2. Day06_29_Static关键字

    Static 关键字 * Static 关键字的用法 - static既可以修饰变量(全局变量和局部变量),又可以修饰方法.static类型的变量称为静态变量,如果不初始化则编译器自动初始化为0 - ...

  3. Day11_52_将Set集合转换为List集合

    Set集合转换为List集合 ``` import java.util.*; public class SetReverseLsit { public static void main(String[ ...

  4. 研发团队管理：IT研发中项目和产品原来区别那么大，项目级的项目是项目，产品级的项目是产品！！！

    前言   从事IT行业多年,一路从小杂兵成长为大团队Leader,对于研发整个体系比较清楚,其实大多人都经历过但是都忽略了的研发成本管控的一个关键的点就是研发过程中项目级和产品级的区别.   市场基本 ...

  5. 集群，lvs负载均衡的四种工作模式

    集群 集群的三种分类以及用途 负载均衡: 分配流量(调度器),提升速度 高可用: 关键性业务 高性能: 开发算法,天气预报,国家安全 负载均衡的集群 lvs(适用于大规模) haproxy(适用于中型 ...

  6. C#中普通缓存的使用

    缓存的概念及优缺点在这里就不多做介绍,当然缓存包含多种有普通缓存.客户端缓存.DNS缓存.反向代理缓存以及分布式缓存等等.今天主要聊一聊C#通过编码来实现普通的缓存.话不多说直接上代码. 一.首先,新 ...

  7. php 数学函数bc的使用（浮点数计算）

    简介: 对于任意精度的数学,PHP提供了支持用字符串表示的任意大小和精度的数字的二进制计算,最多为2147483647-1(或0x7FFFFFFF-1). bcadd - 2个任意精度数字的加法计算 ...

  8. SSDT表函数Hook原理

    其实 SSDT Hook 的原理是很简单的,我们可以知道在 SSDT 这个数组中呢,保存了系统服务的地址,比如对于 Ring0 下的 NtQuerySystemInformation 这个系统服务的地 ...

  9. LA3403天平难题（4个DFS）

    题意:      给出房间的宽度r和每个吊坠的重量wi,设计一个尽量宽但宽度不能超过房间宽度的天平,挂着所有挂坠,每个天平的一段要么挂这一个吊坠,要么挂着另一个天平,每个天平的总长度是1,细节我给出题 ...

  10. 阿里面试官用HashMap把我问倒了

    本人是一名大三学生,最近在找暑期实习,其中也面试过两次阿里,一次菜鸟网络部门.一次网商银行部门,当然我都失败了,同时也让我印象很深刻,因此记录了其中一些面试心得,我觉得这个问题很值得分享,因此分享给大 ...