CODEWITHSUNDEEP
javascriptofflinepdfmake
Litwos
Litwos

Reputation: 1348

Cannot use downloaded library (pdfmake) offline

I am trying to use pdfmake JS library in an offline webpage. I downloaded the CDN file from https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js and saved it offline in ..app/js/pdfmake.js

I loaded the library using require:

require([
   'js/pdfmake.js',
...])

I test the library using the example below:

var buttonTS = document.getElementById("buttonTS")
butonTS.addEventListener("click", function(){
            
  var docDefinition = {
    content: [
            'First paragraph',
            'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
        ]
    };

    var now = new Date();

    var pdf = pdfmake.createPdf(docDefinition);
    pdf.write('pdfs/basics.pdf').then(() => {
        console.log(new Date() - now);
    }, err => {
        console.error(err);
    });
}

But the library does not load, and throws the error:

Uncaught ReferenceError: pdfmake is not defined

This is odd because I have other libraries (SweetAlert), which work with no problems.

Thanks for any help!

Upvotes: 3

Views: 900

Answers (1)

Ashish Shevale
Ashish Shevale

Reputation: 381

Here's a working example you can check

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"
  integrity="sha512-a9NgEEK7tsCvABL7KqtUTQjl69z7091EVPpw5KxPlZ93T141ffe1woLtbXTX+r2/8TtTvRX/v4zTL2UlMUPgwg=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.min.js"
  integrity="sha512-P0bOMePRS378NwmPDVPU455C/TuxDS+8QwJozdc7PGgN8kLqR4ems0U/3DeJkmiE31749vYWHvBOtR+37qDCZQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->

<script src="./pdfmake.min.js"></script>
<script src="./vfs_fonts.min.js"></script>

<script>
  const docDefinition = {
    pageSize: 'A4',
    pageOrientation: 'landscape',
    content: [
      'Hey, it works'
    ],
    pageMargins: [20, 5, 10, 5],
    info: {
      title: 'Some PDF Name',
      author: 'Author Name',
    },
    defaultStyle: {
      fontSize: 9,
      bold: false,
    }
  }

  const pdf = pdfMake.createPdf(docDefinition);
  pdf.open({});
</script>

</html>

If loads the libs downloaded from the cdn. I have also kept the actual cdn links in comment.

The code here is writted directly inside the html file inside a script tag. If you want to keep your code in seperate js files, make sure the script tags for those files are kept after the libs

<script src="./pdfmake.min.js"></script>
<script src="./vfs_fonts.min.js"></script>
<script src="./index.js"></script>

In these examples, I am using pdfmake on client side (browser). You can get the docs for client side usage here

However, if you are generating your pdfs on the backend, these docs might help you better.

Upvotes: -1

Related Questions