I want to convert to PDF a <div> that contains images using JS libraries locally, so I use the html2canvas library to convert from .png to base64 and jsPDF 1.5.2 from here, but when I tried opening the generated PDF on Adobe Acrobat it shows me the error 110: There was an error processing a page Ther was a problem reading this document, though it opened on the web browser (Chrome and Edge).
I looked for a solution and got this. It worked fine with v1.5.3, but then I found out that latest version was v2.5.1 on jsPDf GitHub repository and wanted to use it (latest the better... I think).
So I cloned it, used jspdf.es.min.js and ran into an issue: Uncaught TypeError: Failed to resolve module specifier "@babel/runtime/helpers/typeof". Relative references must start with either "/", "./", or "../". But there was no @babel folder.
I tried installing it with node.js npm install jspdf --save and solved that error (and other with fflate) by changing the import URL and referencing those files on the HTML file.
import _typeof from './../../@babel/runtime/helpers/typeof.js';
import { zlibSync, unzlibSync } from './../../fflate/lib/index.js';
or
import _typeof from './../../@babel/runtime/helpers/typeof.js';
import { zlibSync, unzlibSync } from './../../fflate/lib/index.d.ts';
Instead of
import _typeof from '@babel/runtime/helpers/typeof';
import { zlibSync, unzlibSync } from 'fflate;
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<title>pdf test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="./html2pdf/html2canvas/html2canvas.min.js"></script>
</head>
<body>
<script type="module" src="./node_modules/jspdf/dist/jspdf.es.js"></script>
<script type="" src="./node_modules/fflate/lib/index.js" ></script>
<script type="" src="./node_modules/@babel/runtime/helpers/typeof.js"></script>
<div class="button-container">
<button id="createPDF" >Generate PDF</button>
</div>
<div id="toPrint" data-page="0">
<div >
<img src= "./image.png" >
</div>
<script type="module" src="./html2pdf.js"></script>
</div>
</body>
</html>
html2pdf.js
import sizes from './sizes.json' assert {type: 'json'};
import {jsPDF} from "./node_modules/jspdf/dist/jspdf.es.js"
document.getElementById("createPDF").addEventListener("click", () =>
{
let content = document.getElementById("toPrint");
console.table(sizes)
const page = Number(content.dataset.page)
console.log(page)
let title = document.getElementsByTagName("title")[0].text
let { PDFheight, PDFwidth} = sizes[page]
PDFheight = Number(PDFheight)
PDFwidth = Number(PDFwidth)
let doc = new jsPDF()
html2canvas(content).then((canvas) => {
let base64img = canvas.toDataURL("image/png")
console.log(base64img)
doc.addImage(base64img, 'PNG', 0, 0 , PDFwidth, PDFheight)
doc.save( title + ".pdf")
})
})
Also, I tried with jspdf.es.js and jspdf.umd.js. The thing is that when I solve those, other errors start to show up like:
-
Uncaught SyntaxError: The requested module './node_modules/jspdf/dist/jspdf.umd.js' does not provide an export named 'jsPDF' (at html2pdf.js:2:9)(html2pdf.js is my program) -
Refused to execute script from 'http://127.0.0.1:5501/node_modules/fflate/lib/index.d.ts' because its MIME type ('video/mp2t') is not executable. -
Uncaught ReferenceError: module is not defined at typeof.js:11:1 -
Uncaught ReferenceError: exports is not defined at index.js:6:1 -
Uncaught SyntaxError: The requested module './../../@babel/runtime/helpers/typeof.js' does not provide an export named 'default' (at jspdf.es.js:51:8)