如何使用JSPDF将多个base64图像添加到pdf文件？

如何解决如何使用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}`,(2 * 100),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，它也显示相同的错误。

如何使用JSPDF将多个base64图像添加到pdf文件？

如何解决如何使用JSPDF将多个base64图像添加到pdf文件？

相关推荐