Javascript 如何使用JSPDF将多个base64图像添加到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

我在尝试将多个图像添加到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;
错误:

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)