leedongwei · November 15, 2023 01:04 · benzhuo · Sep 30, 2020 · karthikrajannadurai · Jul 23, 2022
diff --git a/index.html b/index.html
 <html>
  <head>
    <title>Demo for using web workers with pdfmake.js</title>

    <style>
      body {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #content {
        text-align: center;
      }
    </style>
  </head>
  
  <body>
    <div id="content">
      <h1>Demo for using web workers with pdfmake.js</h1>
      <button id="generatePdf">Click To Generate!</button>
    </div>

    <script src="main.js"></script>
  </body>
 </html>
diff --git a/main.js b/main.js
 window.onload = function () {
  const $button = document.getElementById('generatePdf');


  $button.addEventListener("click", function () {
    console.log('Creating worker');
    try {
      const myWorker = new Worker('worker.js');
    } catch (e) {
      console.error(e);
      console.error('Possible issue: http://stackoverflow.com/questions/21408510/chrome-cant-load-web-worker');
      return;
    }
    const myData = [];


    myWorker.onmessage = function(res) {
      console.log('Response received from worker.js');

      // Very hacky solution to automatically start file download
      const anchor = document.createElement('a');
      document.body.appendChild(anchor);
      anchor.href = window.URL.createObjectURL(res.data.pdfBlob);
      anchor.download = 'myFileName.pdf';
      anchor.click();
    };

    myWorker.postMessage(myData);
  });
 };
diff --git a/worker.js b/worker.js
 // This is awkward but needed to make pdfmake work on web workers
 // https://github.com/bpampuch/pdfmake/issues/38#issuecomment-149095815
 window = this;
 document = { createElementNS: function () { return {}; } };


 // Substitute with the path to your pdfmake and vfs_fonts script
 importScripts('/scripts/pdfmake_v0.1.27.min.js');
 importScripts('/scripts/vfs_fonts_v2.001152.min.js');


 onmessage = function(req) {
  console.log('Request received from main.js');

  new Promise(function (resolve, reject) {
    generatePdfBlob(req.data, function (result) {
      if (result) { resolve(result); } else { reject(); }
    });
  }).then(function (pdfBlob) {
    postMessage({ pdfBlob });
  });
 };


 function generatePdfBlob(myData, callback) {
  if (!callback) {
    throw new Error('generatePdfBlob is an async method and needs a callback');
  }

  const docDefinition = generateDocDefinition(myData);
  pdfMake.createPdf(docDefinition).getBlob(callback);
 }


 function generateDocDefinition(myData) {
  return { content: ['First paragraph', 'Another paragraph'] };
 }
	<html>
	<head>
	<title>Demo for using web workers with pdfmake.js</title>

	<style>
	body {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	#content {
	text-align: center;
	}
	</style>
	</head>

	<body>
	<div id="content">
	<h1>Demo for using web workers with pdfmake.js</h1>
	<button id="generatePdf">Click To Generate!</button>
	</div>

	<script src="main.js"></script>
	</body>
	</html>
	window.onload = function () {
	const $button = document.getElementById('generatePdf');


	$button.addEventListener("click", function () {
	console.log('Creating worker');
	try {
	const myWorker = new Worker('worker.js');
	} catch (e) {
	console.error(e);
	console.error('Possible issue: http://stackoverflow.com/questions/21408510/chrome-cant-load-web-worker');
	return;
	}
	const myData = [];


	myWorker.onmessage = function(res) {
	console.log('Response received from worker.js');

	// Very hacky solution to automatically start file download
	const anchor = document.createElement('a');
	document.body.appendChild(anchor);
	anchor.href = window.URL.createObjectURL(res.data.pdfBlob);
	anchor.download = 'myFileName.pdf';
	anchor.click();
	};

	myWorker.postMessage(myData);
	});
	};
	// This is awkward but needed to make pdfmake work on web workers
	// https://github.com/bpampuch/pdfmake/issues/38#issuecomment-149095815
	window = this;
	document = { createElementNS: function () { return {}; } };


	// Substitute with the path to your pdfmake and vfs_fonts script
	importScripts('/scripts/pdfmake_v0.1.27.min.js');
	importScripts('/scripts/vfs_fonts_v2.001152.min.js');


	onmessage = function(req) {
	console.log('Request received from main.js');

	new Promise(function (resolve, reject) {
	generatePdfBlob(req.data, function (result) {
	if (result) { resolve(result); } else { reject(); }
	});
	}).then(function (pdfBlob) {
	postMessage({ pdfBlob });
	});
	};


	function generatePdfBlob(myData, callback) {
	if (!callback) {
	throw new Error('generatePdfBlob is an async method and needs a callback');
	}

	const docDefinition = generateDocDefinition(myData);
	pdfMake.createPdf(docDefinition).getBlob(callback);
	}


	function generateDocDefinition(myData) {
	return { content: ['First paragraph', 'Another paragraph'] };
	}