I'm having a problem trying to use JSPdf with Vuejs. I've got a tutorial on the internet (this one) that shows how to print all the contents of a div (because it was not possible.) But the test works perfectly, in mine, even if I can adapt, the PDF comes in blank, can anyone help?
My code adapted with VueJS:
methods: {
GerarPdf(){
let source = $('#div')
let cache_width = source.width()
let a4 = [595.28, 990.89]
let canvasImage = ''
let winHeight = a4[1]
let formHeight = source.height()
let formWidth = source.width()
let imagePieces = []
imagePieces = [];
imagePieces.length = 0;
source.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(source, {
imageTimeout: 2000,
removeContainer: true
})
.then(canvas => {
console.log(canvas)
canvasImage = new Image();
canvasImage.src = canvas.toDataURL("image/png");
let totalImgs = Math.round(formHeight/winHeight);
for(let i = 0; i < totalImgs; i++) {
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = formWidth;
canvas.height = winHeight;
ctx.drawImage(canvasImage, 0, i * winHeight, formWidth, winHeight, 0, 0, canvas.width, canvas.height);
imagePieces.push(canvas.toDataURL("image/png"));
}
console.log(imagePieces.length);
let totalPieces = imagePieces.length - 1;
let doc = new jsPDF({
unit: 'px',
format: 'a4'
});
imagePieces.forEach(function(img){
doc.addImage(img, 'JPEG', 20, 40);
if(totalPieces)
doc.addPage();
totalPieces--;
});
doc.save('techumber-html-to-pdf.pdf');
//source.width(cache_width);
})
}
}
Related
I've a webpage with 4 charts. I'm taking separate screenshots for each of them. Then tried to put them on another canvas, show them vertically and print it as single-page pdf file. But, I'm getting an Error saying:
Uncaught TypeError: CanvasRenderingContext2D.drawImage: Argument 1
could not be converted to any of: HTMLImageElement, SVGImageElement,
HTMLCanvasElement, HTMLVideoElement, ImageBitmap.
Here is the script
function HTMLtoPDF() {
function verticalCanvases(cnv1, cnv2, cnv3, cnv4) {
var newCanvas = document.createElement('canvas'),
ctx = newCanvas.getContext('2d'),
width = cnv1.width,
height = cnv1.height + cnv2.height + cnv3.height + cnv4.height;
newCanvas.width = width;
newCanvas.height = height;
[{
cnv: cnv1,
y: 0
},
{
cnv: cnv2,
y: cnv1.height
},
{
cnv: cnv3,
y: cnv1.height + cnv2.height
},
{
cnv: cnv4,
y: cnv1.height + cnv2.height + cnv3.height
}].forEach(function(n) {
ctx.beginPath();
ctx.drawImage(n.cnv, 0, n.y, width, n.cnv.height);
});
var imgdata = newCanvas.toDataURL();
return imgdata;
}
var forms = $('[id^=caspioform]');
var canvas1 = html2canvas(forms[3]);
var canvas2 = html2canvas(forms[5]);
var canvas3 = html2canvas(forms[7]);
var canvas4 = html2canvas(forms[9]);
var dURL = verticalCanvases(canvas1, canvas2, canvas3, canvas4);
var doc = new jsPDF("p", "mm", "a4");
var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();
doc.addImage(dURL, 'PNG', 0, 0, width, height);
doc.save('sample.pdf');
}
Since you didn't mention it, I'll assume html2canvas is coming from https://github.com/niklasvh/html2canvas
In that case, the issue here is that hmtl2canvas returns a Promise and that's what you're passing to verticalCanvases instead of the actual canvas element.
To fix it just transform the function in an asynchronous one so you can use async/await:
// |
// |
// v
async function HTMLtoPDF() {
function verticalCanvases(cnv1, cnv2, cnv3, cnv4) {
var newCanvas = document.createElement('canvas'),
ctx = newCanvas.getContext('2d'),
width = cnv1.width,
height = cnv1.height + cnv2.height + cnv3.height + cnv4.height;
newCanvas.width = width;
newCanvas.height = height;
[{
cnv: cnv1,
y: 0
},
{
cnv: cnv2,
y: cnv1.height
},
{
cnv: cnv3,
y: cnv1.height + cnv2.height
},
{
cnv: cnv4,
y: cnv1.height + cnv2.height + cnv3.height
}].forEach(function(n) {
ctx.beginPath();
ctx.drawImage(n.cnv, 0, n.y, width, n.cnv.height);
});
var imgdata = newCanvas.toDataURL();
return imgdata;
}
var forms = $('[id^=caspioform]');
var canvas1 = await html2canvas(forms[3]); // <--
var canvas2 = await html2canvas(forms[5]); // <--
var canvas3 = await html2canvas(forms[7]); // <--
var canvas4 = await html2canvas(forms[9]); // <--
var dURL = verticalCanvases(canvas1, canvas2, canvas3, canvas4);
var doc = new jsPDF("p", "mm", "a4");
var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();
doc.addImage(dURL, 'PNG', 0, 0, width, height);
doc.save('sample.pdf');
}
I was working on a small scale project for Fashion MNIST. I have used the below code. I first tried executing the code on my primary machine and received an unchanging loss of ~2, after which I tried running the same code on my secondary machine and I could see that my loss and accuracy metrics were performing just the way they should have.
Here is my index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#latest"></script>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs-vis"></script>
</head>
<body>
<h1>Fashion Classifier!</h1>
<canvas id="canvas" width="280" height="280" style="position:absolute;top:100;left:100;border:8px solid;"></canvas>
<img id="canvasimg" style="position:absolute;top:10%;left:52%;width=280;height=280;display:none;">
<input type="button" value="classify" id="sb" size="48" style="position:absolute;top:400;left:100;">
<input type="button" value="clear" id="cb" size="23" style="position:absolute;top:400;left:180;">
<script src="fashion-data.js" type="module"></script>
<script src="fashion-script_exercise.js" type="module"></script>
</body>
</html>
A JS code to get the data
const IMAGE_SIZE = 784;
const NUM_CLASSES = 10;
const NUM_DATASET_ELEMENTS = 70000;
const TRAIN_TEST_RATIO = 1 / 7;
const NUM_TRAIN_ELEMENTS = Math.floor(TRAIN_TEST_RATIO * NUM_DATASET_ELEMENTS);
const NUM_TEST_ELEMENTS = NUM_DATASET_ELEMENTS - NUM_TRAIN_ELEMENTS;
const MNIST_IMAGES_SPRITE_PATH =
'https://storage.googleapis.com/learnjs-data/model-builder/fashion_mnist_images.png';
const MNIST_LABELS_PATH =
'https://storage.googleapis.com/learnjs-data/model-builder/fashion_mnist_labels_uint8';
export class FMnistData {
constructor() {
this.shuffledTrainIndex = 0;
this.shuffledTestIndex = 0;
}
async load() {
// Make a request for the MNIST sprited image.
const img = new Image();
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const imgRequest = new Promise((resolve, reject) => {
img.crossOrigin = '';
img.onload = () => {
img.width = img.naturalWidth;
img.height = img.naturalHeight;
const datasetBytesBuffer =
new ArrayBuffer(NUM_DATASET_ELEMENTS * IMAGE_SIZE * 4);
const chunkSize = 5000;
canvas.width = img.width;
canvas.height = chunkSize;
for (let i = 0; i < NUM_DATASET_ELEMENTS / chunkSize; i++) {
const datasetBytesView = new Float32Array(
datasetBytesBuffer, i * IMAGE_SIZE * chunkSize * 4,
IMAGE_SIZE * chunkSize);
ctx.drawImage(
img, 0, i * chunkSize, img.width, chunkSize, 0, 0, img.width,
chunkSize);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (let j = 0; j < imageData.data.length / 4; j++) {
// All channels hold an equal value since the image is grayscale, so
// just read the red channel.
datasetBytesView[j] = imageData.data[j * 4] / 255;
}
}
this.datasetImages = new Float32Array(datasetBytesBuffer);
resolve();
};
img.src = MNIST_IMAGES_SPRITE_PATH;
});
const labelsRequest = fetch(MNIST_LABELS_PATH);
const [imgResponse, labelsResponse] =
await Promise.all([imgRequest, labelsRequest]);
this.datasetLabels = new Uint8Array(await labelsResponse.arrayBuffer());
this.trainIndices = tf.util.createShuffledIndices(NUM_TRAIN_ELEMENTS);
this.testIndices = tf.util.createShuffledIndices(NUM_TEST_ELEMENTS);
this.trainImages =
this.datasetImages.slice(0, IMAGE_SIZE * NUM_TRAIN_ELEMENTS);
this.testImages = this.datasetImages.slice(IMAGE_SIZE * NUM_TRAIN_ELEMENTS);
this.trainLabels =
this.datasetLabels.slice(0, NUM_CLASSES * NUM_TRAIN_ELEMENTS);
this.testLabels =
this.datasetLabels.slice(NUM_CLASSES * NUM_TRAIN_ELEMENTS);
}
nextTrainBatch(batchSize) {
return this.nextBatch(
batchSize, [this.trainImages, this.trainLabels], () => {
this.shuffledTrainIndex =
(this.shuffledTrainIndex + 1) % this.trainIndices.length;
return this.trainIndices[this.shuffledTrainIndex];
});
}
nextTestBatch(batchSize) {
return this.nextBatch(batchSize, [this.testImages, this.testLabels], () => {
this.shuffledTestIndex =
(this.shuffledTestIndex + 1) % this.testIndices.length;
return this.testIndices[this.shuffledTestIndex];
});
}
nextBatch(batchSize, data, index) {
const batchImagesArray = new Float32Array(batchSize * IMAGE_SIZE);
const batchLabelsArray = new Uint8Array(batchSize * NUM_CLASSES);
for (let i = 0; i < batchSize; i++) {
const idx = index();
const image =
data[0].slice(idx * IMAGE_SIZE, idx * IMAGE_SIZE + IMAGE_SIZE);
batchImagesArray.set(image, i * IMAGE_SIZE);
const label =
data[1].slice(idx * NUM_CLASSES, idx * NUM_CLASSES + NUM_CLASSES);
batchLabelsArray.set(label, i * NUM_CLASSES);
}
const xs = tf.tensor2d(batchImagesArray, [batchSize, IMAGE_SIZE]);
const labels = tf.tensor2d(batchLabelsArray, [batchSize, NUM_CLASSES]);
return {xs, labels};
}
}
The implementation JS file
import {FMnistData} from './fashion-data.js';
var canvas, ctx, saveButton, clearButton;
var pos = {x:0, y:0};
var rawImage;
var model;
function getModel() {
model = tf.sequential();
model.add(tf.layers.conv2d({inputShape: [28, 28, 1], kernelSize: 3, filters: 8, activation: 'relu'}));
model.add(tf.layers.maxPooling2d({poolSize: [2, 2]}));
model.add(tf.layers.conv2d({filters: 16, kernelSize: 3, activation: 'relu'}));
model.add(tf.layers.maxPooling2d({poolSize: [2, 2]}));
model.add(tf.layers.flatten());
model.add(tf.layers.dense({units: 128, activation: 'relu'}));
model.add(tf.layers.dense({units: 10, activation: 'softmax'}));
model.compile({optimizer: tf.train.adam(), loss: 'categoricalCrossentropy', metrics: ['accuracy']});
return model;
}
async function train(model, data) {
const metrics = ['loss', 'val_loss', 'acc', 'val_acc'];
const container = { name: 'Model Training', styles: { height: '1000px' } };
const fitCallbacks = tfvis.show.fitCallbacks(container, metrics);
const BATCH_SIZE = 512;
const TRAIN_DATA_SIZE = 6000;
const TEST_DATA_SIZE = 1000;
const [trainXs, trainYs] = tf.tidy(() => {
const d = data.nextTrainBatch(TRAIN_DATA_SIZE);
return [
d.xs.reshape([TRAIN_DATA_SIZE, 28, 28, 1]),
d.labels
];
});
const [testXs, testYs] = tf.tidy(() => {
const d = data.nextTestBatch(TEST_DATA_SIZE);
return [
d.xs.reshape([TEST_DATA_SIZE, 28, 28, 1]),
d.labels
];
});
return model.fit(trainXs, trainYs, {
batchSize: BATCH_SIZE,
validationData: [testXs, testYs],
epochs: 10,
shuffle: true,
callbacks: fitCallbacks
});
}
function setPosition(e){
pos.x = e.clientX-100;
pos.y = e.clientY-100;
}
function draw(e) {
if(e.buttons!=1) return;
ctx.beginPath();
ctx.lineWidth = 24;
ctx.lineCap = 'round';
ctx.strokeStyle = 'white';
ctx.moveTo(pos.x, pos.y);
setPosition(e);
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
rawImage.src = canvas.toDataURL('image/png');
}
function erase() {
ctx.fillStyle = "black";
ctx.fillRect(0,0,280,280);
}
function save() {
var raw = tf.browser.fromPixels(rawImage,1);
var resized = tf.image.resizeBilinear(raw, [28,28]);
var tensor = resized.expandDims(0);
var prediction = model.predict(tensor);
var pIndex = tf.argMax(prediction, 1).dataSync();
var classNames = ["T-shirt/top", "Trouser", "Pullover",
"Dress", "Coat", "Sandal", "Shirt",
"Sneaker", "Bag", "Ankle boot"];
alert(classNames[pIndex]);
}
function init() {
canvas = document.getElementById('canvas');
rawImage = document.getElementById('canvasimg');
ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0,0,280,280);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mousedown", setPosition);
canvas.addEventListener("mouseenter", setPosition);
saveButton = document.getElementById('sb');
saveButton.addEventListener("click", save);
clearButton = document.getElementById('cb');
clearButton.addEventListener("click", erase);
}
async function run() {
const data = new FMnistData();
await data.load();
const model = getModel();
tfvis.show.modelSummary({name: 'Model Architecture'}, model);
await train(model, data);
await model.save('downloads://my_model');
init();
alert("Training is done, try classifying your drawings!");
}
document.addEventListener('DOMContentLoaded', run);
I used the same version of Chrome and the Chrome server extension to run the code. What could possibly be the problem? Note: I have also checked the console logs and receive no errors there too.
I can see in your code no initialization of the kernel weights, so depending on the default implementation on different machines, you might have the weight initialized to 0, which makes it very difficult for the optimizer to initiate its convergence.
Try in the implementation JS file section, in the get_model function, in the layers definition, to add an option kernelInitializer: 'glorotUniform' to see if any improvement.
I've been trying to printed page as pdf , but haven't been able to, which causes the error : object doesn't support property or method 'setattribute'
at line ; html2canvas($(html)).find('#Content')[0],
How to fix error ?
window.onload = function() {
document.getElementById("cmd").onclick = function fun() {
alert("hello");
exportTwo();
}
}
function exportTwo() {
var canvasToImage = function(canvas){
var img = new Image();
var dataURL = canvas.toDataURL('image/png');
img.src = dataURL;
return img;
};
var canvasShiftImage = function(oldCanvas,shiftAmt){
shiftAmt = parseInt(shiftAmt) || 0;
if(!shiftAmt){ return oldCanvas; }
var newCanvas = document.createElement('canvas');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext('2d');
var img = canvasToImage(oldCanvas);
ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);
return newCanvas;
};
var canvasToImageSuccess = function(canvas){
var pdf = new jsPDF('l','px'),
pdfInternals = pdf.internal,
pdfPageSize = pdfInternals.pageSize,
pdfScaleFactor = pdfInternals.scaleFactor,
pdfPageWidth = pdfPageSize.width,
pdfPageHeight = pdfPageSize.height,
totalPdfHeight = 0,
htmlPageHeight = canvas.height,
htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
safetyNet = 0;
while(totalPdfHeight < htmlPageHeight && safetyNet < 15){
var newCanvas = canvasShiftImage(canvas, totalPdfHeight);
pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE');
totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);
if(totalPdfHeight < htmlPageHeight){
pdf.addPage();
}
safetyNet++;
}
pdf.save('test.pdf');
};
$.ajax({
url:'https://apps.group.ec/sites/Insight/en-us/Pages/Dom/dm.aspx',
type:'GET',
success: function(data){
//$('#Content').html($(data).find('#content').html());
var html = $.parseHTML(data);
console.log($(html).find( '#Content').html());
html2canvas($(html)).find('#Content')[0], {
onrendered: function(canvas){
canvasToImageSuccess(canvas);
}
};
}
});
}
Thank you.
In my controller I am defining html2canvas functions like:
var builderApp = angular.module('builderApp',
['fg', 'ngSanitize', 'ui.bootstrap', 'angularFileUpload', 'textAngular', 'ui.grid', 'ui.grid.pagination']);
builderApp
.run(function ($templateCache) {
$templateCache.put('custom-busy.html',
"<div class=\"cssload-loader\"><div class=\"cssload-inner cssload-one\"></div><div class=\"cssload-inner cssload-two\"></div><div class=\"cssload-inner cssload-three\"></div></div>"
);
});
builderApp.controller('builderCtrl', function ($scope, formSchema, formData, $http, $filter) {
var vm = this;
$scope.canvasToImageSuccess = function (canvas) {
var margins = {
top: 50,
bottom: 80,
left: 20,
width: 600
};
var pdf = new jsPDF('p', 'pt', 'a4'), // jsPDF(orientation, unit, format)
pdfInternals = pdf.internal,
pdfPageSize = pdfInternals.pageSize,
pdfScaleFactor = pdfInternals.scaleFactor,
pdfPageWidth = pdfPageSize.width - (margins.left + margins.left),
pdfPageHeight = pdfPageSize.height + margins.left,
totalPdfHeight = 0,
htmlPageHeight = canvas.height,
htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
safetyNet = 0;
pdf.setFontSize(22);
pdf.setFontStyle('italic');
pdf.page = 1;
while (totalPdfHeight < htmlPageHeight && safetyNet < 15) {
var newCanvas = canvasShiftImage(canvas, totalPdfHeight);
pdf.addImage(newCanvas, 'png', margins.left, margins.top, pdfPageWidth, 0, null, 'NONE');
pdf.page++;
totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);
if (totalPdfHeight < htmlPageHeight) {
pdf.addPage();
}
safetyNet++;
}
pdf.save(fileName);
};
$scope.createPDF = function () {
var source = $("#formData").html();
var fileName = "Form1.Pdf";
var canvasToImage = function (canvas) {
var img = new Image();
var dataURL = canvas.toDataURL('image/png');
img.src = dataURL;
return img;
};
var canvasShiftImage = function (oldCanvas, shiftAmt) {
shiftAmt = parseInt(shiftAmt) || 0;
if (!shiftAmt) { return oldCanvas; }
var newCanvas = document.createElement('canvas');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext('2d');
var img = canvasToImage(oldCanvas);
ctx.drawImage(img, 0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);
return newCanvas;
};
try{
html2canvas(source, {
onrendered: function (canvas) {
alert('rendered');
$scope.canvasToImageSuccess(canvas);
}
});
}
catch(e)
{
var x = e;
}
}
From UI I am able to call createPDF function however, the alert in html2canvas is not getting fired and so my function canvasToImageSuccess does not get executed.
Am I missing anything here?
I tried to inject html2canvas as global.html2canvas = require("html2canvas"); but this is not working.
I checked console, but there is not error.
The fix was that the html2canvas needs element and not the html text.
so, line:
html2canvas(source,
should be:
html2canvas($("#formData"),
I am trying to render pdf onto the single canvas, I referred to the below link to implement the same.
Visit: Render .pdf to single Canvas using pdf.js and ImageData
var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
var scale = 1.5;
var canvasWidth = 0;
var canvasHeight = 0;
var pageStarts = new Array();
pageStarts[0] = 0;
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
debugger;
pdf = _pdf;
//Render all the pages on a single canvas
for (var pNum = 1; pNum <= pdf.numPages; pNum++) {
pdf.getPage(pNum).then(function getPage(page) {
var viewport = page.getViewport(scale);
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({ canvasContext: context, viewport: viewport });
pages[pNum - 1] = context.getImageData(0, 0, canvas.width, canvas.height);
canvasHeight += canvas.height;
pageStarts[i] = pageStarts[i - 1] + canvas.height;
});
}
canvas.width = canvasWidth;
canvas.height = canvasHeight;
for (var i = 0; i < pages.length; i++) {
context.putImageData(pages[i], 0, pageStarts[i]);
}
});
I see space is created to render the page where as pdf is not displayed.
any help would greatly appreceated. Thanks.
Your code to store the pageStarts references "i" as if it was an iterator index, but it is in a for statement using pNum. I'm surprised that this code doesn't throw errors in the console pointing you to the possible solution. You should change:
canvasHeight += canvas.height;
pageStarts[i] = pageStarts[i - 1] + canvas.height;
to something like:
pageStarts[pNum - 1] = canvasHeight;
canvasHeight += canvas.height;
Notice that I reorganized the canvasHeight calculation until after you've grabbed the "last" value. This will allow you to determine the correct starting height for the current page image data without having to use the pageStart for the previous iteration.
This is an untested solution since you didn't post the rest of the code, but it should lead you towards your solution.
Here is multiple page view with textLayer
<script type="text/javascript">
window.onload = function () {
var url = '[[*pdf]]';
var scale = 1.1; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
var currPage = 1; //Pages are 1-based not 0-based
var numPages = 0;
var thePDF = null;
PDFJS.workerSrc = '/js/build/pdf.worker.js';
PDFJS.getDocument(url).then(function(pdf){
thePDF = pdf;
numPages = pdf.numPages;
pdf.getPage(1).then(handlePages);
});
function handlePages(page){
var viewport = page.getViewport(scale);
var pdfPage = document.createElement('div');
pdfPage.className = 'pdfPage';
var pdfContainer = document.getElementById('pdfContainer');
var canvas = document.createElement( "canvas" );
canvas.style.display = "block";
var context = canvas.getContext('2d');
var outputScale = getOutputScale(context);
canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0;
canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0;
context._scaleX = outputScale.sx;
context._scaleY = outputScale.sy;
if (outputScale.scaled) {
context.scale(outputScale.sx, outputScale.sy);
}
// The page, canvas and text layer elements will have the same size.
canvas.style.width = Math.floor(viewport.width) + 'px';
canvas.style.height = Math.floor(viewport.height) + 'px';
pdfPage.style.width = canvas.style.width;
pdfPage.style.height = canvas.style.height;
pdfPage.appendChild(canvas);
var textLayerDiv = document.createElement('div');
textLayerDiv.className = 'textLayer';
textLayerDiv.style.width = canvas.style.width;
textLayerDiv.style.height = canvas.style.height;
pdfPage.appendChild(textLayerDiv);
page.render({canvasContext: context, viewport: viewport});
var textLayerPromise = page.getTextContent().then(function (textContent) {
var textLayerBuilder = new TextLayerBuilder({
textLayerDiv: textLayerDiv,
viewport: viewport,
pageIndex: 0
});
textLayerBuilder.setTextContent(textContent);
});
pdfContainer.appendChild(pdfPage);
currPage++;
if ( thePDF !== null && currPage <= numPages ){thePDF.getPage( currPage ).then( handlePages );}
}
}
</script>