jspdf 相关问题

亲爱的，我有以下 HTML 页面用这张简单的桌子 الشهر المدخرات&l... 亲爱的，我有下面的 HTML 页面 <html dir="rtl" lang="ar"> 用这张简单的桌子 <table id="my-table"> <tr> <th>الشهر</th> <th>المدخرات</th> </tr> <tr> <td>يناير</td> <td>$100</td> </tr> <tr> <td>فبراير</td> <td>$80</td> </tr> </table> 将 jsPDF 与 autotable 插件一起使用 function htmlToPDF() { const doc = new jsPDF({ filters: ['ASCIIHexEncode'] }); doc.autoTable({ html: '#my-table', theme: 'grid', styles: { font: 'Amiri', halign: 'right' }, }) doc.save('report.pdf'); } </script> 即使我将 html 方向设置为上面显示的 rtl，它仍然以 ltr 方向保存文件我尝试将 dir 属性放在不同的 HTML 元素中，例如 <HTML> <body> <div> <table> 没有成功任何帮助将不胜感激谢谢更新：我找到了这个 doc.viewerPreferences({"Direction" : "R2L"}, true); 但是也没用！我不得不使用 JQuery 反转克隆对象中表的列 var rtlTable = $('#html-table').clone(); rtlTable.find('tr').each(function () { var tds = $(this).children('td,th').get().reverse(); $(this).append(tds); }); 然后我将 html 元素传递给 autotable 函数 var pdf = new jsPDF(); pdf.autoTable({html: rtlTable.get()[0], styles: { halign: "left" }); pdf.save("reprt.pdf"); 我找到了适合我的解决方案。我使用了@user3723572 的一部分很棒的解决方案 + 我为其他想要实现与我相同目标的人添加了 utf8 支持。我的目标是创建一个包含希伯来字母 (UTF-8) + RTL 的表格。首先，我加载了我想要的字体（如果你想使用 doc.text() 和 utf8 字母，这是必须的）。然后我将 jspdf 设置为 rtl + 反转我表中的所有列。 var doc = new jsPDF(); doc.setFont("VarelaRound-Regular"); //hebrew font doc.setFontType("normal"); doc.setR2L(true); //RTL var rtlTable = $('#table').clone(); // clone the required table rtlTable.find('tr').each(function () { //reverse the row's columns order var tds = $(this).children('td,th').get().reverse(); $(this).append(tds); }); doc.autoTable({ html:rtlTable.get()[0], startY: 10, styles: {halign:'center',font: "VarelaRound-Regular",fontStyle:"normal",fontSize:6,cellPadding:{top: 1, right: 0.5, bottom: 1, left: 0.5}} }); doc.save("a4.pdf"); 您可以在此处查看如何设置新字体 - https://github.com/MrRio/jsPDF 在使用 Unicode 字符/UTF-8 下：节。我找到的方法。使用 React 而不使用 jQuery。我使用的格式适合大（宽）表。 const tableRef = useRef<HTMLTableElement>(null); const ReverseTable = () => { const rtlTable = tableRef.current?.cloneNode(true) as HTMLTableElement; if (rtlTable) { Array.from(rtlTable.querySelectorAll('tr')).forEach((tr) => { const tds = Array.from(tr.querySelectorAll('td, th')).reverse(); tds.forEach((td) => tr.appendChild(td)); }); } const doc = new jsPDF({orientation: 'landscape', format: [297, 420]}); doc.addFont('fonts/noto_sans_hebrew.ttf', 'NotoSansHebrew', 'normal'); doc.setFont('NotoSansHebrew'); doc.setLanguage('he'); autoTable(doc, { html: rtlTable as HTMLTableElement, theme: 'grid', startY: 20, margin: { top: 10 }, styles: { font: 'NotoSansHebrew', fontSize: 10, cellPadding: 2, lineWidth: 0.1, lineColor: [204, 204, 204], halign: "left" }, }) doc.save('fileName.pdf'); }

javascript html css jspdf jspdf-autotable

回答 3 投票 0

如何将AGM地图插入jspdf？

我在项目中实现了一张地图，该地图从 SQL 数据库中获取数据。

angular jspdf angular-google-maps

回答 0 投票 0

没有为“.vue”文件配置加载器：node_modules/vue3-simple-html2pdf/src/vue3-simple-html2pdf.vue

我正在研究 nuxt 3 项目并安装了 js pdf 包以生成 PDF vue3-simple-html2pdf 包链接。另外，我创建了一个插件文件来使用该插件插件/js-pdf.js 进口

compiler-errors nuxt.js vuejs3 jspdf nuxtjs3

回答 0 投票 0

jsPDF 水印图像在文本上

我正在使用 jsPDF 插件，但我遇到了问题，我可以有不同数量的页面和不同的内容，并且我放了两个水印。问题是有时文字是多余的......

jquery jspdf

回答 0 投票 0

如何在 React 中使用 jsPDF 自定义 HTML 和 CSS 解决这个问题？

自动分页不起作用或者我不明白主要问题。报表模板.jsx const ReportTemplate = () => { 常量样式 = { 页： { marginLeft: '2rem', ...

html css reactjs jspdf

回答 0 投票 0

如何在jspdf react js中的每个页面的标题中往返地址

我已经在 react js 中使用 htmlcanvas jspdf 成功导出为 pdf，但我现在想要两个地址，一个在左角，另一个在右角，一个图像在 ev 的标题中间......

javascript html reactjs material-ui jspdf

回答 0 投票 0

你好，谁能帮助我，我想创建一个可以将 excel 文件转换为 pdf 的 javascript 程序

到目前为止，我设法让它成功读取文件，但它只保存了一个带有空白列的pdf。我的 excel 文件包含图像，我只想打印出 A 到 L 列。到目前为止，我设法让它成功读取文件，但它只保存了一个带有空白列的 pdf。我的 excel 文件包含图像，我只想打印出 A 到 L 列。 <!DOCTYPE html> <html> <head> <title>XLS to PDF Converter</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script> </head> <body> <input type="file" id="fileInput"> <button onclick="convert()">Convert XLS to PDF</button> <script> function convert() { const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const reader = new FileReader(); reader.onload = function() { const arrayBuffer = reader.result; const uint8Array = new Uint8Array(arrayBuffer); // Get the first worksheet from the workbook const workbook = XLSX.read(uint8Array, { type: 'array' }); const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // Create a new PDF document const doc = new jsPDF('p', 'pt', 'a4'); // Set the columns to be printed const columns = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']; // Set the starting x and y positions let xPos = 40; let yPos = 60; // Loop through the rows and columns and add them to the PDF document for (let i = 1; i <= (worksheet['!rows'] ? worksheet['!rows'].length : 0); i++) { for (let j = 0; j < columns.length; j++) { const cellRef = columns[j] + i.toString(); const cell = worksheet[cellRef]; // Get the cell value and format const value = cell ? cell.v : ''; const format = cell ? cell.z : ''; // Add the cell to the PDF document doc.setFontSize(8); doc.text(xPos, yPos, value.toString(), {align: 'left', baseline: 'middle'}); doc.setFillColor(255, 255, 255); doc.rect(xPos, yPos - 8, 50, 20, 'FD'); doc.line(xPos + 50, yPos - 8, xPos + 50, yPos + 12); doc.line(xPos, yPos - 8, xPos, yPos + 12); doc.line(xPos, yPos + 12, xPos + 50, yPos + 12); // Move to the next column xPos += 50; } // Move to the next row xPos = 40; yPos += 20; } // Save the PDF document doc.save('example.pdf'); }; reader.readAsArrayBuffer(file); } </script> </body> </html> 程序可以读取文件但保存时没有任何内容，格式与excel文件上的单元格格式不一样，问题似乎出在如何从工作表中检索单元格值。当前的实现只是获取单元格值，而不是单元格的格式或样式。由于未保留格式，因此在呈现 PDF 时可能会导致问题。要解决此问题，您可以使用 XLSX.utils.sheet_to_json() 方法将工作表转换为 JSON 对象并检索每个单元格的格式和样式信息。这是您的代码的更新版本，应该处理 Excel 文件中的格式和图像： <!DOCTYPE html> <html> <head> <title>XLS to PDF Converter</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script> </head> <body> <input type="file" id="fileInput"> <button onclick="convert()">Convert XLS to PDF</button> <script> function convert() { const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const reader = new FileReader(); reader.onload = function() { const arrayBuffer = reader.result; const uint8Array = new Uint8Array(arrayBuffer); // Get the first worksheet from the workbook const workbook = XLSX.read(uint8Array, { type: 'array' }); const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // Convert worksheet to JSON object with formatting and style information const json = XLSX.utils.sheet_to_json(worksheet, { header: 1, cellStyles: true, cellHTML: true }); // Create a new PDF document const doc = new jsPDF('p', 'pt', 'a4'); // Set the columns to be printed const columns = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']; // Set the starting x and y positions let xPos = 40; let yPos = 60; // Loop through the rows and columns and add them to the PDF document for (let i = 0; i < json.length; i++) { const row = json[i]; for (let j = 0; j < columns.length; j++) { const col = columns[j]; const cell = row[j]; // Get the cell value and format const value = cell ? cell : ''; const format = worksheet[col + (i + 1)] ? worksheet[col + (i + 1)].z : ''; // Add the cell to the PDF document doc.setFontSize(8); doc.text(xPos, yPos, value.toString(), { align: 'left', baseline: 'middle' }); doc.setFillColor(255, 255, 255); doc.rect(xPos, yPos - 8, 50, 20, 'FD'); doc.line(xPos + 50, yPos - 8, xPos + 50, yPos + 12); doc.line(xPos, yPos - 8, xPos, yPos + 12); doc.line(xPos, yPos + 12, xPos + 50, yPos + 12); xPos += 50; } // Move to the next row xPos = 40; yPos += 20; } // Save the PDF document doc.save('example.pdf'); }; reader.readAsArrayBuffer(file); } </script> </body> </html>

javascript xlsx jspdf

回答 1 投票 0

jsPDF 在第一次保存时工作，第二次不更新 pdf

场景：用户选择几个选项，下载 PDF。然后用户更改一些选择，并下载一个新的 PDF。问题：第一次运行一切正常，但试图下载第二个...

reactjs pdf jspdf

回答 1 投票 0

如何将 HTML div 内容转换为 PDF 并将 PDF 文件保存到服务器中的文件夹

我一直在阅读这里所有类似的帖子，但似乎没有一个对这个问题有任何答案。现在，我正在使用 jsPDF 将我的“报告页面”转换为 PDF 并下载

pdf pdf-generation jspdf html-to-pdf

回答 0 投票 0

jsPdf 在 Angular 8 中添加字空间问题

我在 Angular 项目中使用 jsPDF 并迭代来自 api 问题测试格式的数据不起作用，特别是单词空间未正确显示。 const doc = new jsPDF("p", "pt", &quo...