jspdf 相关问题

jsPDF是一个用JavaScript编写的开源库，用于生成PDF文档。

Angular nativeElement 未定义

我正在尝试从 Angular 应用程序中的 HTML 内容生成 PDF。这是我的父组件：父组件 HTML：

javascript angular typescript jspdf

回答 0 投票 0

使用 jsPDF 和 html2Canvas 在 Angular 中创建多页 PDF

我有一个应用程序，左侧有 (3) 个项目的列表及其各自的预览有一个“生成 PDF”按钮，单击该按钮应下载包含所有 (3) 个预览的 PDF。我...

angular pdf-generation jspdf html2canvas

回答 1 投票 0

jsPDF 无法处理图像

我正在尝试使用jsPDF库在客户端生成pdf。我的代码看起来像 <p>我正在尝试使用 jsPDF 库在客户端生成 pdf。我的代码看起来像</p> <pre><code><script type="text/javascript" src="libs/base64.js"></script> <script type="text/javascript" src="libs/sprintf.js"></script> <script type="text/javascript" src="jspdf.js"></script> <script> var doc = new jsPDF(); var imgData = 'data:image/png;base64,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'; doc.setFontSize(40); doc.text(30, 20, 'Hello world!'); doc.output('datauri'); doc.addImage(imgData, 'JPEG', 15, 40, 200, 114); </script> </code></pre> <p>但似乎只打印文本，没有图像。<br/> 这里有什么问题吗？</p> </question> <answer tick="true" vote="15"> <p>如果你想添加png图片，你必须获取最新的jspdf.js并添加支持png库</p> <pre><code><script type="text/javascript" src="libs/png_support/zlib.js"></script> <script type="text/javascript" src="libs/png_support/png.js"></script> <script type="text/javascript" src="jspdf.plugin.addimage.js"></script> <script type="text/javascript" src="jspdf.plugin.png_support.js"></script> <script type="text/javascript" src="jspdf.js"></script> </code></pre> <p>然后在脚本中，将格式更改为“PNG”</p> <pre><code><script> var doc = new jsPDF(); var imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABy... doc.setFontSize(40); doc.text(30, 20, 'Hello world!'); doc.addImage(imgData, 'PNG', 15, 40, 200, 114); doc.output('datauri'); </script> </code></pre> </answer> <answer tick="false" vote="3"> <p>将以下文件包含到您的 HTML 中：</p> <pre><code><script src="Scripts/jspdf/png_support/zlib.js"></script> <script src="Scripts/jspdf/png_support/png.js"></script> <script src="Scripts/jspdf/FileSaver.js"></script> <script src="Scripts/jspdf/jspdf.js"></script> <script src="Scripts/jspdf/jspdf.plugin.addimage.js"></script> <script src="Scripts/jspdf/jspdf.plugin.png_support.js"></script> </code></pre> <p>您可以从<a href="https://github.com/MrRio/jsPDF" rel="nofollow">https://github.com/MrRio/jsPDF</a></p>获取所有这些文件 <p>来自 libs/FileSaver.js 的 FileSaver.js 来自 libs/png_support.js 的 zlib.js 和 png.js</p> <p>如果不需要保存pdf文件，可以排除FileSaver.js。 </p> <p>当它警告缺少某些功能时，打开 dist/jspdf.debug.js，搜索它的名称以查找包含它的特定模块并将其包含在上面的列表中（在 jspdf.js 文件之后）。</p> </answer> <answer tick="false" vote="2"> <p>构建文档后调用 <pre><code>doc.output</code></pre>：</p> <pre><code>doc.addImage(imgData, 'JPEG', 15, 40, 200, 114); doc.output('datauri'); </code></pre> </answer> <answer tick="false" vote="0"> <p>如果您使用像 React 这样的库，您可以将其存储在状态中并在视图中显示，当您导出时将显示图像，</p> <pre><code>const [image, setImage] = React.useState(null); React.useEffect(() => { const loadImage = async () => { let imageUrl = "your-image-url"; let imageUrlFetched = await fetch(imageUrl); let blob = await imageUrlFetched.blob(); let fileName = imageUrl.substring(imageUrl.lastIndexOf("/") + 1); let file = new File([blob], fileName, { type: blob.type }); setImage(URL.createObjectURL(file)); }; loadImage(); }, []); </code></pre> <p>最后你可以将状态放入图像src中，</p> <pre><code> <img src={image} alt="" /> </code></pre> </answer> <answer tick="false" vote="-6"> <p>jsPDF 目前仅支持 <strong>JPEG</strong> 格式的图像。 </p> <p>您的图片<pre><code>var imgData = 'data:image/png;base64,iVBORw...</code></pre>为PNG格式。</p> </answer> </body></html>

javascript jspdf

回答 0 投票 0

jsPDF 在操作系统之间的呈现方式不同

我正在 Linux 上的 Angular 项目中工作，jsPDF 库运行得很好。这里导出的 PDF 正是我想要/期望发生的：Linux Export - 好然后我启动了...

angular typescript pdf operating-system jspdf

回答 1 投票 0

以角度方式将 svg 显示为 pdf 文件

我正在尝试将 svg 内容添加到我的 pdf 中，我已经尝试过 var svgContent = ' 我正在尝试将 svg 内容添加到我的 pdf 中，我已经尝试过 var svgContent = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>'; var svgData = 'data:image/svg+xml;base64,' + btoa(svgContent); var doc = new jsPDF(); doc.addImage(svgData, 'JPEG', 10, 20, 20, 20); 但它没有添加到我的 pdf 文件中首先，您需要按照 Robert 的评论建议添加 SVG 命名空间。其次，您使用了错误的方法将 SVG 直接放入 PDF 中。根据文档，正确的方法是使用 addSvgAsImage: https://raw.githack.com/MrRio/jsPDF/master/docs/module-svg.html 请注意，这是一个异步方法，因此您可能需要使用：而不是doc.addImage(...) await doc.addSvgAsImage(svgContent, 10, 10, 100, 100); 如果您想使用 addImage 方法，您仍然可以这样做，但您必须先将 SVG 放在画布上： const svgContent = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">' + '<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />' + '</svg>'; const svgData = 'data:image/svg+xml;base64,' + btoa(svgContent); const canvas = document.createElement('canvas'); canvas.width = 100; canvas.height = 100; const doc = new jsPDF(); const img = new Image(); document.body.appendChild(canvas); img.onload = function() { canvas.getContext('2d')!.drawImage(img, 0, 0); doc.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 10, 10, 100, 100); }; img.src = svgData;

html angular pdf svg jspdf

回答 1 投票 0

jsPDF css 样式不起作用

我正在尝试使用 jsPDF 将我的 div 转换为 pdf ，这是我的 div ：我正在尝试使用 jsPDF 将我的 div 转换为 pdf，这是我的 div : <div id="pdffile" style="display:none" class="containerPDF"> <headerp><h1 id="pdfTitle" style="text-align: center; color:red;"></h1></headerp> <navp> <div id="pdfImage"></div> </navp> <articlep> <h1>Description</h1><p id="pdfDescription"></p> </articlep> <footerp style="text-align: center;">Copyright © Emoovio</footerp> </div> <div id="editor"></div> 这是我的 jquery 代码： $('#cmd').click(function () { var x = $(".entry-title").text(); doc.fromHTML($('#pdffile').html(), 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers }); //doc.autoPrint(); doc.save('emoovio-'+x+'.pdf'); }); 当我执行这段代码时，我有我的pdf，但没有中心，没有颜色，没有样式！要保留所有样式，请尝试html2pdf.js。它首先会将您的 HTML 页面转换为图像，然后转换为 pdf。您可以参阅他们的文档以了解更多详细信息。

jquery html css pdf jspdf

回答 1 投票 0

标题：使用 html2pdf.js 生成 PDF 时内容被截断的问题

我正在开展一个项目，需要创建用户生成的简历的 PDF 版本。简历的内容是动态的，包括经历、教育和技能等部分，这些...

javascript reactjs jspdf html2canvas html2pdf

回答 1 投票 0

jsPDF，在另一个动态文本之后添加文本

我需要创建带有动态字段的 PDF。有时文本可以是 2 行，有时可以是 3 行。如何在第一个动态文本之后直接插入另一个元素而不对静态进行硬编码...

javascript jspdf

回答 3 投票 0

如何专门针对 Chrome 扩展使用 jsPDF 库？

对于我的 Chrome 扩展程序，我想为用户提供下载 PDF 的选项，以显示并格式化他们的数据。这个想法是用户按下扩展弹出窗口上的按钮，扩展