Javascript 如何使用JSPDF将多个base64图像添加到pdf文件中?
我在尝试将多个图像添加到PDF文件时遇到问题。 我找不到解决办法,谁能帮我 谢谢 我的密码Javascript 如何使用JSPDF将多个base64图像添加到pdf文件中?,javascript,jspdf,Javascript,Jspdf,我在尝试将多个图像添加到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([]) l
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;
错误:
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)
当我添加相同的图像,它的工作!但当我有两个不同的图像,它不工作。。。有不同的方法,但不起作用。我相信这不是图像的问题,因为我可以在我的HTML中显示它们。。。我也使用了自动表,它显示了相同的错误
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)