标签: jspdf
下载使用 Chrome PDF 查看器打开的 PDF 时设置默认文件名
我的 angular 应用程序有一个呈现 PDF 的 iframe：
<iframe ng-src="{{PCtrl.docSrc}}" type="application/pdf" ...></iframe>
docSrc 生成为 BASE64 编码的字符串，类似于：
"data:application/pdf;base64,JVBERi0xLjMKMyA..."
Chrome 可以很好地呈现嵌入的 PDF。可以单击下载来下载 PDF，用户将看到一个“另存为”对话框。Chrome PDF 查看器给出的默认文件名是“download.pdf”，我该如何更改？
推荐指数
解决办法
查看次数
jspdf/pdfmake 创建 PDF 与将页面打印为 PDF 的好处？
我想在浏览器扩展选项卡中创建 PDF 报告。我希望能够添加图形、文本、UTF-8 支持、图像、位置文本，但除此之外，在样式和布局方面没有任何过分疯狂的东西。
我一直在阅读有关 jspdf（不支持 UTF8）和 pdfmake 的限制。看起来他们在处理很多问题时会很复杂。
我的一个想法是：
将我的报告所需的 HTML 直接放在页面上。
使用 CSS 隐藏报告 HTML 以外的所有内容，并使用“@media print”样式来设置报告样式。
触发“window.print()”以在 JavaScript 中打印页面。Chrome 显示预览，让您单击即可保存为 PDF。Firefox 的打印预览显示预览，界面有点乱，但您只需点击几下即可保存为 PDF。
我错过了什么吗？我的方法有什么主要缺点吗？也许操作系统特定的问题？为什么要使用 jspdf 或 pdfmake 呢？
我没有看到在任何我觉得奇怪的地方建议使用这种方法。我看到的唯一缺点是用户可能会对为什么他们在不期望 PDF 时被要求打印某些内容感到困惑，但由于报告不是经常生成，所以这里没什么大不了的。
推荐指数
解决办法
查看次数
jsPDF 自动表格标题文本不起作用以及如何将 html 呈现到标题
标题示例
使用许多在线示例，我试图将标题文本打印到表格顶部。我不能做的一件事是更新 jsPDF 和自动表格版本。这是由于代码最终会发生的一些内部冲突。问题 1 是为什么标题没有呈现到顶部。第二个问题是如何将 html 呈现到标题的顶部，而不仅仅是文本。目前 doc.text 只接受字符串作为参数。
我想渲染类似：“主标题小标题”到头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.60/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.15/jspdf.plugin.autotable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.15/jspdf.plugin.autotable.src.js"></script>
</head>
<body>
<button onclick="generatePdf()">Generate pdf</button>
<script>
function generatePdf(){
var columns = [{
title: "ID",
dataKey: "id"
},
{
title: "Name",
dataKey: "name"
},
{
title: "Country",
dataKey: "country"
},
];
var rows = [{
"id": 1,
"name": "Shaw",
"country": "Tanzania"
},
{
"id": 2, …推荐指数
解决办法
查看次数
如何将 html2pdf PDF 转换为 base64？
我在让html2pdf.js正确给我回调以便我可以将其转换为 base64 字符串时遇到一些问题。
我已经尝试过这个：
html2pdf().from(el).then(function(pdf) {
// pdf is null when I log this...
console.log(pdf);
}).save();
以及许多其他变体，使用output()以下所有内容：
var pdf = new jsPDF();
html2pdf().from(element).set({ pdf: pdf }).toPdf().save();
一切都无济于事。
我目前正在v.0.9.0. 我真正需要得到的是 base64，这样我就可以将其发送回服务器并将其附加到电子邮件中 - 对我来说如何实现这一点并不重要，但我在弄清楚如何使用它时遇到了问题正确回调。
我已经搜索了 github 上的文档和问题。
推荐指数
解决办法
查看次数
使用 jsPDF 从 iframe 创建 PDF
好的，我已经在互联网上搜索了解决方案，但我找不到任何东西。我正在尝试找到一种将 iframe 的内容保存为 PDF 的方法。我总是遇到 PDF 只是空白的问题。似乎jsPDF是唯一的方法。我有点想知道这不起作用的原因是否是因为 fromHTML() 函数。我不知道。如果你们中有人想出了解决方案，我将不胜感激！！
以下是您可以在 HTML 文件中尝试的一些示例代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script>
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#frame')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Test.pdf');
}, margins);
}
</script>
<button onclick="javascript:demoFromHTML();">PDF</button>
<iframe id="frame" src='https://wikipedia.org/wiki/Main_Page' style="width: …推荐指数
解决办法
查看次数
Chrome 查看器 pdf 按钮不适用于 jsPDF
我正在使用 jsPDF 生成 pdf，它工作正常。Chrome 查看器 pdf 按钮不起作用。我尝试了多种不同的方法，但没有成功。
在这里我想分享示例代码：
download() {
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
// Save the PDF
var string = doc.output('datauristring');
var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();
//doc.save('Test.pdf');
}
通过此代码，新选项卡打开，但 chrome 查看器下载按钮不起作用。
那么有没有其他方法可以做到这一点。
推荐指数
解决办法
查看次数
如何在jspdf-autoTable中获取lastAutoTable的finalY
我正在使用 angular 9.我需要将包含表格上方和下方某些内容的 html 表格转换为 pdf。我正在使用 jspdf-autotable。我按照链接https://github.com/simonbengtsson/jsPDF-AutoTable/blob/master/examples/examples.js 中的示例进行操作，我可以编写标题，然后生成表格. 问题是当我需要在表格下方添加一些文本行时。
我的代码如下。
generatePdf(){
const doc = new jsPDF();
doc.setFontSize(18)
doc.text('ATTENDANCE REPORT FOR DEPOT - '+this.depotId, 14, 22);
autoTable(doc, { html: '#report-per-depot',startY: 30, });
doc.text(" ", 14, doc.lastAutoTable.finalY + 10)
doc.save('AttandancePerDepot.pdf');
}
我得到的错误是
Property 'lastAutoTable' does not exist on type 'jsPDF'.
我试图将 lastAutoTable 导入为，从 'jspdf-autotable' 导入 lastAutoTable；
我没有显示任何错误，但我不确定如何从中获得 finalY。
lastAutoTable(doc,{});
上面没有显示错误，但它的返回类型是无效的。所以这就是我被卡住的地方。如何获得角度为 9 或 10 的最终位置？
推荐指数
解决办法
查看次数
使用 jsPDF 和 autotable 从 HTML 表生成 PDF 时出错
我正在使用 jsPDF 和 autotable 从 DOM 树中的表生成 PDF。我的项目基于 Wordpress，我通过 CDN 注册并排队 () 这两个库。
但是，当执行我的 pdf 生成代码（基本上是要测试的虚拟代码）时，它失败并出现以下错误：
Uncaught TypeError: t.getDocument().getFillColor is not a function
f https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js:10
c https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js:10
drawTable https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js:10
drawTable https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js:10
autoTable https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js:10
由于我找不到任何类似的问题并且无法自己解决它，所以我想分享我的问题。
const doc = new jsPDF({
orientation: "landscape",
unit: "mm",
format: [300, 260]
});
doc.text(25, 25, "Header");
doc.addPage();
doc.autoTable({ html: '#my-table' });
doc.save(pdfName);
<table id="my-table" class="table table-bordered table-custom">
<thead id="test-thead">
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</thead>
<tbody id="test-tbody">
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
</tbody>
</table>
推荐指数
解决办法
查看次数
附加超过 4 个 300 KB 的图像时，jsPDF 输出（'dataurlnewwindow'）不起作用
我在尝试预览使用 jsPDF API 生成的 PDF 文件时遇到问题，当我向文档添加超过 3 张图像（每张图像 300-400KB）时，我可以正确下载文档，但无法显示在浏览器中使用 jsPDF 方法：doc.output('dataurlnewwindow')。我的网络浏览器上打开了一个新选项卡，但它是空白的（选项卡顶部显示“正在充电...”，但从未显示。但是，我可以使用 jsPDF 将 PDF 文件下载到我的电脑上，没有任何问题方法： doc.save( this.reportFileName );
您知道为什么会发生这种情况吗？可能是与我需要在网络浏览器中预览的 PDF 文件大小有关的问题？这样做有最大尺寸吗？任何帮助将非常感激。
谢谢！
this.doc = new jsPDF({orientation: "p", unit: "pt", format: "a4"})
// ....
// doing some stuff in the doc file
// adding images of 400 KB aprox. (it works with 3 images... but with 4 or more doesn't
this.doc.addImage('data:image/jpeg;base64,'+ logoFooter, 'JPEG', this.marginLeft+40, 794, 40, 45);
// ....
preview () {
try {
this.doc.output('dataurlnewwindow'); // >> doesn't work and an …推荐指数
解决办法
查看次数
错误:用pdfkit写完
我使用pdfkit,可以成功上传一次pdf到S3.但如果第二次尝试它会抛出此错误.
Error: write after end
at writeAfterEnd (_stream_writable.js:220:12)
at PDFReference.Writable.write (_stream_writable.js:271:5)
at PDFPage.write (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/pdfkit/js/page.js:95:27)
at PDFDocument.addContent (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/pdfkit/js/document.js:161:17)
at PDFDocument.save (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/pdfkit/js/mixins/vector.js:19:19)
at PDFDocument._fragment (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/pdfkit/js/mixins/text.js:257:12)
at PDFDocument._line (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/pdfkit/js/mixins/text.js:203:12)
at emitThree (events.js:140:20)
at LineWrapper.emit (events.js:216:7)
at /Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/pdfkit/js/line_wrapper.js:141:17
at LineWrapper.wrap (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/pdfkit/js/line_wrapper.js:207:9)
at PDFDocument._text (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/pdfkit/js/mixins/text.js:48:17)
at PDFDocument.text (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/pdfkit/js/mixins/text.js:59:19)
at /Users/jonathancorrin/Desktop/workspace/rent-app/server/routes/image-upload.js:36:6
at Layer.handle [as handle_request] (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/express/lib/router/layer.js:95:5)
at /Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/express/lib/router/index.js:281:22
at Function.process_params (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/express/lib/router/index.js:335:12)
at next (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/express/lib/router/index.js:275:10)
at Function.handle (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/express/lib/router/index.js:174:3)
at router (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/express/lib/router/index.js:47:12)
at Layer.handle [as handle_request] (/Users/jonathancorrin/Desktop/workspace/rent-app/node_modules/express/lib/router/layer.js:95:5) …推荐指数
解决办法
查看次数