javascript - 从外部 html 文件和 css 生成 pdf
问题描述
我有一个外部 html 文件,我想将其打印为 PDF,但我无法让示例代码按预期工作,而且在实现它时我显然遗漏了一些琐碎的事情。
到目前为止,这是我的代码:
function savePDF(data) {
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(data, 'text/html');
let pdf = new jsPDF('p','pt','a4');
pdf.addHTML(
htmlDoc.body, // HTML DOM element.
);
pdf.save("test.pdf");
}
data
包含我希望转换为 pdf 的外部网页的 html 的字符串在哪里。
Chrome 正在生成 TypeError:Cannot read property 'innerWidth' of null
例如,这可以完美地工作(使用fromHTML
而不是addHTML
),但是缺少 css/样式:
function savePDF(data) {
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(data, 'text/html');
let pdf = new jsPDF('p','pt','a4');
pdf.fromHTML(htmlDoc.body.innerHTML, 0, 0, {},
function(){pdf.save('test.pdf');
});
}
我正在使用的示例 html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF Test</title>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
</body>
</html>
解决方案
正如文档所说,不推荐使用 addHtml 方法(http://raw.githack.com/MrRio/jsPDF/master/docs/global.html#addHTML),所以我对您的示例进行了一些操作,如果您更新了代码,例如这行得通。您仍然需要做一些工作来修复 pdf 中 div 的宽度。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55;">
<h4 style="color: #000; ">Hello world!</h4>
</div>
</body>
<script type="text/javascript">
function savePDF(data) {
let pdf = new jsPDF('p','pt','a4');
pdf.html(data, {
callback: function (doc) {
doc.save("test.pdf");
}
});
}
savePDF(document.body.innerHTML)
</script>
</html>
推荐阅读
- ruby-on-rails - 从数组到二维数组,除以 2 个值
- javascript - BMI计算程序
- swift - 无法从 ios 13 中的 url 视频生成缩略图
- python - python中列表中最后6个值的最小值
- python - 将输入字符串拆分为单个单词,如果存在特定值,则检查单词的值创建变量保持与原始字符串相同的索引
- javascript - 反应:当 onChange 事件发生时,我的文本输入的现有值被清除
- javascript - 尝试从选定的数据结构中删除属性时出现类型错误消息
- typescript - TypeScript 环境声明不起作用
- java - Spring Boot/Gradle/Logback:bootRun 失败并显示“无法实例化 [ch.qos.logback.classic.LoggerContext]”:java.lang.AbstractMethodError:
- python - Odoo:cron方法锁定具有ir.cron引用的元素的写入属性