使用 JavaScript 将 HTML 转换为 PDF
使用 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的更多相关文章
- 关于html转换为pdf案例的一些测试与思考
由于工作所需,最近花时间研究了html转换为pdf的功能.html转换为pdf的关键技术是如何处理网页中复杂的css样式,通过在网上收集资料,发现目前html 转换为pdf的解决方案主要分为三类: 客 ...
- C# 使用 wkhtmltopdf 把HTML文本或文件转换为PDF
一.简介 之前也记录过一篇关于把 HTML 文本或 HTML 文件转换为 PDF 的博客,只是之前那种方法有些局限性. 后来又了解到 wkhtmltopdf.exe 这个工具,这个工具比起之前的那种方 ...
- 在禅道中实现WORD等OFFICE文档转换为PDF进行在线浏览
条件: 安装好禅道的服务器 能直接浏览PDF的浏览器(或通过 安装插件实现 ) 文档转换服务程序(建议部署在另一台服务器上) 实现 原理: 修改禅道的文件预览功能(OFFICE文档其使用的是下 ...
- wkhtmltopdf 将网页转换为PDF和图片
wkhtmltopdf 是一个shell工具,它使用了WebKit渲染引擎和Qt,将网页html转换为pdf的强大工具,转换后的pdf也可以通过pdf工具进行复制.备注.修改 官网下载地址:http: ...
- 上传Text文档并转换为PDF(解决乱码)
前些日子,Insus.NET有分享一篇<上传Text文档并转换为PDF>http://www.cnblogs.com/insus/p/4313092.html 它是按最简单与默认方式来处理 ...
- 上传Text文档并转换为PDF
今天在ASP.NET MVC环境中学习一些PDF相关的知识,想法是上传文件成功时,并把文件转换为PDF文档. 打开你的专案,运行NuGet包管理器,下载一个叫iTextSharp的东东: 点击Inst ...
- Javascript的一个生产PDF的库： unicode和中文问题的解决
Javascript的一个生产PDF的库: unicode和中文问题的解决基于canvas和jspdf库, 实现用javascript的支持中文pdf生成实用工具.参考:http://javascri ...
- winform实现word转换为PDF(.doc)
注意:实现word转换为PDF文件,本人安装Office为2013; word以后缀为.doc为例实现文件类型转换,具体方式如下所示: 实现步骤: 1.添加命名空间引用——using Microsof ...
- C#实现office文档转换为PDF或xps的一些方法( 转)
源博客http://blog.csdn.net/kable999/article/details/4786654 代码支持任意office格式 需要安装office 2007 还有一个office20 ...
随机推荐
- 【工具类】Stream流构建指定长度的时间集合
package com.gabriel.stage.utils; import cn.hutool.core.date.DateUnit; import cn.hutool.core.date.Dat ...
- pwn 好的联系网站
https://pwnable.kr/ https://w3challs.com/challenges/wargame http://overthewire.org/wargames/ http:// ...
- 【原创】Centos8安装ansible
1.安装步骤 # 安装epel扩展源 dnf install https://dl.fedoraproject.org/pub/epel/epel-release-latest-8.noarch.rp ...
- DVWA之XSS
XSS XSS,全称Cross Site Scripting,即跨站脚本攻击,某种意义上也是一种注入攻击,是指攻击者在页面中注入恶意的脚本代码,当受害者访问该页面时,恶意代码会在其浏览器上执行,需要强 ...
- POJ3233不错的矩阵(矩阵套矩阵)
题意: 给一个n*n的矩阵A,然后求S=A + A^2 + A^3 + ..+ A^k. 思路: 矩阵快速幂,这个题目挺新颖的,以往的矩阵快速幂都是退出公式,然后构造矩阵,这 ...
- CVE-2012-3569：VMware OVF Tool 格式化字符串漏洞调试分析
0x01 简介 VMware OVF Tool 是一个命令行实用程序,允许您从许多 VMware 产品导入和导出 OVF 包.在 2.1.0 - 2.1.3 之间的版本中存在格式化字符串漏洞,通过修改 ...
- java.lang.ClassNotFoundException: org.apache.jsp.index_jsp
问题描述 Tomcat启动报错 java.lang.ClassNotFoundException: org.apache.jsp.index_jsp 问题原因 因为tomcat在启动过程中jsp和se ...
- properties和yml进行对比
properties和yml进行对比 概念 springboot支持两种格式的配置文件,一种是yml,一种是properties,默认的文件名是application.properties或者appl ...
- 【Web前端HTML5&CSS3】05-样式继承与其他概念
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 样式继承与其他概念 1. 继承 2. 选择器的权重 3. 长度单位 像素 屏幕分辨率 图像分辨率 百分比 em ...
- Zookeeper详细使用解析！分布式架构中的协调服务框架最佳选型实践
Zookeeper概念 Zookeeper是分布式协调服务,用于管理大型主机,在分布式环境中协调和管理服务是很复杂的过程,Zookeeper通过简单的架构和API解决了这个问题 Zookeeper实现 ...