javascript - 如何使用 JSPDF 将多个 base64 图像添加到 pdf 文件?
问题描述
当我尝试将多个图像添加到 PDF 文件时出现问题。我找不到解决方案,谁能帮助我...
谢谢!
我的代码!
import './App.css';
import axios from 'axios';
import { useState } from 'react';
import jsPDF from 'jspdf';
import 'jspdf-autotable';
function App() {
const [products, setProducts] = useState([])
let doc = new jsPDF()
function createCatalog() {
doc.setFontSize(40)
doc.text(35, 25, 'Paranyan loves jsPDF')
doc.addImage(`data:image/png;base64, ${products[0].image}`, 'PNG', (1 * 100), 10, 70, 15);
doc.addImage(`data:image/png;base64, ${products[1].image}`, 'PNG', (2 * 100), 10, 70, 15);
doc.save('catalogo.pdf')
}
async function generateTable() {
const res = await axios.get('http://localhost:8080');
let list = [];
res.data.forEach(item => {
if(item.codigo) {
list.push(item)
}
})
setProducts(list);
}
return (
<div className="App">
<button onClick={ generateTable }>Gerar Tabela</button>
<button onClick={ createCatalog }>Gerar Catálogo</button>
<table id="catalog">
<thead>
<tr>
<td>Foto</td>
<td>Código</td>
<td>Produto</td>
<td>Preço</td>
</tr>
</thead>
<tbody>
{
products.map(item =>
<tr key={item.codigo}>
<td><img src={`data:image/png;base64, ${item.image}`}></img></td>
<td>{item.codigo}</td>
<td>{item.produto}</td>
<td>{item.preco}</td>
</tr>
)
}
</tbody>
</table>
</div>
);
}
export default App;
我的产品清单:
[{"categoria":"HIDRÁULICA","produto":"Luva Lisa 3/4 Marrom","codigo":"1","preco":0.32,"image":"UklGRjwEAABXRUJQVlA4WAoAAAAQAAAAigAAigAAQUxQSEEAAAAVX6CojRSIq7zwrwmJERGxpD8J2EaS1KhNIAuZArj45J/VmS8i+h8LAAAAAAAAAADyjFFujHR+/x9Sv/81RtkxMgBWUDgg1AMAALAQAJ0BKosAiwA+kUifSzOmMSajlxkAsNIJZ0iq8q7Q/EQ2h2hn93/XeXQNw1f5QJh3ohjvEZHfiBVO2c153/2HsE/Vf/g6QdK3jwowjDE0CfE2WhdDjfZsXRIwvdaA8kiiIa1X6mP4Poy6KsPGGez8Txtfzl8jf2r2f55/Nta+AGlkA02WhOk3DbJnxAAADgAABAAAzwAAmQAAagAAFgEAMwAA/vxKmOZq8D187Y6IQADJoAAA/Zhm+IlP+K1P/X/5fuwMxWY/6A8GG98/Mt+45ZRP3YC9lYu3/xOhj3R/Nncbd0LtVFQiGfUiV8N7Xm1uMXgfL8UaQPt6W1WOjayvWXReTFrWffNrdG5RldIAvd5EEwXijGdqUuYJfarM9oz2n0OLx98balV8J5p7pyZYeRgiyuPcHhZDa4crjGRLbRCRXej/9r/xq+/ybcnr1Dd/6Uye4Q2/h520Xy3xYnlvix4uDqR/EqG45xvV5SVe+Zf2OlxXExoCOi9NAybfkLsD1wAA/r9f084Gb/Kv/5NFFZGlhi/CzC3I/pcRhjxf/W7J+//b0sA5oG9Wy91L2AOKJ8I7k/bpC3kvUGCzxZMMACzGmDVSWVaGjdm7AbfgkYKaX0omk9p6/VOymmauxqYiesf06PbN/xZDem15oXBTs0TTD+4K8ud5p7AlRJ/8Uqw3hzgTjq/FoOO3rrXCss/4q7rupjYQimwaOAAA7fw78ZgZFZHrq4WUfR3gYYzuZu6Mz/em6GQK5QwH9oqDpARUd7Tfap0DwfkJiI3cnv/CXGWA84QjaFPn7gsaDXvCb37ZRasyJnpasraIC8Ogc1IMDUukOefrsLRM3L725gnP1sU2UyAAAPdndnJv8XO+/YRVKP+FtOf/gwRHzQHP7CYva52WtPF7TfoIZdAcEl2jPzIr/vsD/e302EbP1mnVHo1fBXvD8zpsv09A/X0P4tXwWKIjnv/+PtA/b8+K8nvKL/8x+8KSpnVzM02Adx3YRZOsFGff04O/myGC7H9Hr/egcHXqe/oydSRLe+vjoielyrn9tq944x/wb/8qCaxNLxi/j/m5Oe4F+GaB8GtsUf2n777pl2Nh/U3mh7LaqOt2/8HbEfaH8zvyb1zXRSRdD/+e8o/cyv7Cc2vaO1JnwZV/8xnu8qQ3iZ6Os1/EqSkGdXfx9X5vB4VnLMYHwOLkBvUKlyTjAlN5w1gXfgV/+bSiIgciOe84X2MYwAAAV9DLg4My0mxT4poQc3hCv7/xlHKhAu8+j6NIJsAzXo4/60FFMrwlFh3XqzbAz//hJAAAjsAA"},{"categoria":"HIDRÁULICA","produto":"Luva Lisa Rosca 3/4x1/2 Marrom","codigo":"5291","preco":0.9,"image":"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"}]
错误:
jspdf.es.min.js:377 Uncaught TypeError: a.getData is not a function
at Object.t.processWEBP (jspdf.es.min.js:377)
at Object.P (jspdf.es.min.js:96)
at Object.push../node_modules/jspdf/dist/jspdf.es.min.js.t.addImage (jspdf.es.min.js:96)
at createCatalog (App.js:17)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
at executeDispatch (react-dom.development.js:8243)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
at processDispatchQueue (react-dom.development.js:8288)
at dispatchEventsForPlugins (react-dom.development.js:8299)
at react-dom.development.js:8508
at batchedEventUpdates$1 (react-dom.development.js:22396)
at batchedEventUpdates (react-dom.development.js:3745)
at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
at attemptToDispatchEvent (react-dom.development.js:6005)
at dispatchEvent (react-dom.development.js:5924)
at unstable_runWithPriority (scheduler.development.js:646)
at runWithPriority$1 (react-dom.development.js:11276)
at discreteUpdates$1 (react-dom.development.js:22413)
at discreteUpdates (react-dom.development.js:3756)
at dispatchDiscreteEvent (react-dom.development.js:5889)
当我添加相同的图像时,它可以工作!但是当我有 2 个不同的图像时,它不起作用......有不同的方法,它不起作用。我相信这不是图像的问题,因为我可以在我的 HTML 中显示它们......我也使用过 autoTable 并且它呈现相同的错误。
解决方案
推荐阅读
- utf-8 - 如何正确地将汉字打印到 Windows 控制台?
- amazon-web-services - 将 ALB 的目标组附加到 Auto-scaling 组
- c++ - 如何从 CSV 获取数据并将其存储到 C++ 中的表对象中
- jquery - 修复 ajax 问题并验证插件
- ios - 如何使用 UIPreviewParameters 将文本范围指定为 UIContextMenuInteraction 的突出显示预览而不隐藏视图的其余部分?
- android - Flutter 如何从 CupertinoTimerPicker 返回数据?
- python - macOS 脚本编辑器 - AttributeError:模块“枚举”没有属性“IntFlag”
- javascript - 'RangeError: 无效的时间值'
- c# - 无法隐式转换类型 List
列出 错误 - spring-boot - 控制不来查看 i。春季启动中的 JSP /HTML