Блог

У меня проблема, когда я пытаюсь добавить несколько изображений в файл 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":"UklGRvwKAABXRUJQVlA4WAoAAAAQAAAAigAAigAAQUxQSEIAAAAVX6CobRuo92v8IQ1jRATWcn9lB7aRJDVqE8hCpgAuPvlndeaLiP7HAgAAAAAAAACAPGOUGyOd3/ H1O9/jVF2jAxWUDgglAoAALAgAJ0BKosAiwA kUScSqWwqqcmUQo4sNIJZ2xCTvmPbN/sP7p5UGun q/s/5LeHv4N/pf5/8QOZtmj/Aeod9Cf73r1/pX/ZvE7pfy/f6r/F94T8jvVo7L/XvpheYHJF gv d6Q hz9b/2PmmRVfx3hFEG6rXt9n/59 Rn5Hawl/Q/yZ/IDlK/UY/o/9J/Kr zbpL/gP4BuAH9z853Ok a/2X/d/2j8YPoB/If5x/kP7F 5X U4xTsmvLJJXOPhbRoeowyduLt9RkQ6WQ8iiD/3c7poPEmhziJ/WE c1M9DcVclbgMN2/3zXS8qzgh6vdOyUq5zMkchsWfjGN8xg4XsjS39SEGEooqY8YxsAAAcAAB7AQBDAQAXAQAtAQDtAQB7AQD /KgCMwUI4IVnwuYJEfBPBuxxSgC55LABtAAAsxBI DPOQ0tnC/2AN6/P2 VKkmPwCrn2R0AvHSfT995ucG/DrxyBy3t1e1wYKgS2J JZ99jyFuUt7bjIG6ZBGfL WoAb4x6e63PArtQPKbbA92V5Zx77n7ZD3RrzCHs5 0 kb DToGEqeEFOwPwB8y6k7kt5lFSviAwi7U5nqL9MP5HG3CZxQ1RR3uTFC0r874uzoaVPmTID49CeURRhoZv8Y aLxt/yrVskdx3PqXiPXXebBdjBEyXw9k0v3nogPp4XvR3I6vYYac5nqByO7OvzVCFBLg/zfph4XspF8FOjMv98BtTyLaemo4a67EDM0J5a4Y54XWPc9k6unSbVOwLbpDWgppGHRPlHKm9ZfMYridSe0Y7Z4IZgArvlnxSjxBRuoGdQ8zlJdK03OhDKtSckIi8dZY50SiFzC7X0M3jj09 hfRr8vPT867RMlwkNmVXZ1UxtQbeUxeUtmGOZjdBt5RY4u8lqyrlIQ HNvRv8R3epPQ I334AAP3V9FYf2l8qikQDiPRx9GjzfTWLxa8tS oC1DN54epXVAYULDilx20BU0WIiMP5ZPi fUb7JC/c8IozFC9IhKJMgHwIe5GF4t1QKbvoGcddHzPl7IFP9M cwn//T1qxJ183nBovmjWdKhh8UzMtOQlGrgGYrPJ8MtwvBBZrjoOP11TrQSzvXiOQ4SCjv p3Zf8ITMLJezPsS/2eG1u42GL1hf07Eg1z5ZxM1/uKhv31JIyIL0Q//jcqIg8TR2Dobq/yVLN1mtPe7SnEYnz3dEmEkS3iU3zVEZBF8Yp33XmOXYgCQ3FVZ 6QpBStd3qCeTeWMBo4UP/MZrqUfaatmZBC/D3BvpLF5D0YxPiY87/zqS5 saDEyOErtS7MTPjgM6CEoULO5FUU7okaLELH7j7U2/kbfwrQn0UknxhVY3YrvAAA 1EthrPBrwP6h8xztg3toDfbNSbblKvaPC28jKk1WjRLxd3H1B1SIO2oHkyuAAA5eJJJxQpf4cX57w8Qt wLgmS903 D62ihkutX 1H/rwVf z1 6PeTJqqfasSPQkZdNX8sP6BDrYsR32u8 SCo632HJKNRvv6VTN938S5j ZqNUKoa6jS59FO1/96Rhj/ 14fq6uKlH5DL3Tn45uIa9OrBU7OvRVwLeJC9m3gCGFPs0ybB0jgmwggKbL6pfs/IbuEgJyFACCoRTgWtvHicc0rwlsac/Oh7j OiLJa7UmroQYt6sIh59HWq7vuETlSSAog9/kRwcaKyBDjW37cGZlyNbGti9DC8qnyjIHbET1EinZLulKAA/pK/0f/r9Md2Rr9LSe8GyEs4bKHWJaha7lPPhf7v8Vej29Snp5cG3Xln71xDgK 1ZGyhXyLAb/2dIw0uA7ZzD7q/S2cNApJizFjBDbfenfW5qoIVUNmahIrOhbvpIZeKPU06zjYJALxtxHyCKD fRkh1qv7UXinuPCg0GUO75q7l9A3bHve18pn4PqzY f2NuOjjY3ce5A0fMdJ6Kut89/XCFAhXGzBc7zP2kXmYk9OtTanEmhVlDfBfbRjo4z1VSzgxC Qsu/oP/M6PUAsi3UG7MZ71GnK3/EXEZ6EEGqYFeduhluClq/LDshh8SJ2 KlW ooy 6oW87X6uzJMGE/2fikKMvQDl2OQrrE8dQ3m7GRrLakm0UyV6EROVzzYI/ KBjFc5wdnXs8aAAP7QH0/IX/v 1D8 IQVqn4Z//3BfUDky Hjoy53x8jFvr4NS5viXbtaa35z1L4Vx30zlN/koUBiG2UkVfyybSgzz5Y5iEY4x3WvxhtOrv/5oJJ MONce /YN6xiqkH0jyG24r7ol3wsDBtLKwQZrrvIlOtZifDiF1Z/oUAbVdwU/f/8GzS02j 732CqxeDA/7zc n7X7swLFv3Tw4/Pp1sDG6QlgMJN4witzhIt00LwbtzyhlnWvLqW/7cA 4GoUxTgnynRfL39FoQN5CCbZlNe /C7CpglGYKyG65BWLVE/1gB4xY3EXfH9 Yd4TaMBL4BVc1oHugEQ5A8xkoOqA/idJf0zHUY3gGqnywb3/b5id7xepkK76v wcIrLLuw9Gpy0CWnZ/8jI2MXOPGhq9jv3nqgtfNXcs4Bk5g51mm /symDlp97 fXHrRFdcWTewDhTrGC72NL5Z7ebbybe5fnPxJR3dWXfE5/XyqvxAOwXP/h7KBeRPRlzN/7 io8lBY61MzFVvo9SY ncTrdbGhp47OZG/gHLwnKzxe2c6jrjKzSVPSpF8PSIVOBA4pEHKjBYN r3D7uFrQ74aZx1NUH6kN94 tB2pnOm/eR09bMRchmoq8qcA/7H7eYtAgrn3OisvUF7DOUK54SDAAAG1iiXaB1w0UFEcyYzICKVur33w0blFoHkF6J/UkNrHRE0D//dSwqZVlT3f6/f32SZGHx15xgP RlnzQLb8nflvWi2B6BXX5/hpOybGZUoq ep37Ww6eYZIOJAb4WS15hXXVZpDtYOlP/dQq8A7OUk3rYqFnXX8lwHDglOBq8xrGyaK/xfFldam6iDq CR7FCLD0qLIpxUjO/T eC2QuMH8l y0UGdx/r5l0 XHzvpn2Y0Ix12mt/KNEJiAzeQulXki70kJfk08vk FffS3KAF2c1 tbuhFNqKKXAn8FPhcXXyXf x7qoT5ga3uYHvfb2HC/wMZO95oJ3YJqlMNlJcjKoH1mVn8W6LZZnwxwoBIDg3x4M1Uz5NvNK979fYXX9M40qBsYP0 tvheo75RHNPHrTmll6PTdroD8jkHFUYY3PwUlff/n9hRsjcJPx2i2eh4/3vwTSn9oTYouz7vQDSjVfnSP38zDyMnN89CulSVNFYB6EvHEAB04AAIjmNqugwF4K0nP 6f0f4z9vw0nZNjLb5zhobjSK4Ge v gx2dD0fn/9bjJ14t9/xogdek0MR5eRn80LAT8uF0lPNHfEiMVbfmElP3/tP9T/hTEfXJNUAS3k NwHDb1m1KWn8S GXU8lj3JCIwurdrnxHcCpqoKI8DFECIz2yfXd/o39nsHRXUxbbiDUVtQSEC1TIO/kTcWjxzS faYaGfEsDgOaU NcH3vIahWyiovTTBeqXoRmDKaHsGAQzdOv oJZFohfYfY7VDNsD/D7R9 3Mjd2s7wfhESrghTiGAjqgEC4zI3YX/AAA"}]
  

Ошибка:

 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… Я также использовал автотаблицу, и она выдает ту же ошибку.