I am using PDF.js framework to render PDF. I am using base64 data to render PDF. But in IE 11 pdf looking blurry.
See below screen from IE 11
See below code :
var renderPDF = function(url, canvasContainer,data) {
var scale= 0.9; //"zoom" factor for the PDF
function renderPage(page) {
var canvas = document.createElement('canvas');
var viewport = page.getViewport(scale);
var ctx = canvas.getContext('2d');
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
canvas.height = viewport.height;
canvas.width = viewport.width;
canvasContainer.appendChild(canvas);
page.render(renderContext);
}
function renderPages(pdfDoc) {
for(var num = 1; num <= pdfDoc.numPages; num++)
pdfDoc.getPage(num).then(renderPage);
}
PDFJS.disableWorker = false;
var pdfAsDataUri = "data:application/pdf;base64,"+data; // shortened
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
PDFJS.getDocument(pdfAsArray).then(renderPages);
};
var BASE64_MARKER = ';base64,';
var convertDataURIToBinary = function(dataURI) {
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(var i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
};
Please help me.
If your PDF.js isn't working in your IE11 it requires compatibility.js.
You can insert the following line to your code right after the tag (before any other <script>s):
<script type="text/javascript" src="../../web/compatibility.js"></script>
You can also add file below:
metadata.js
bidi.js
Hope it help.
Thats the code for PDF.js framework... i would do is to check if IE10 works OK... if not!!! then your code have some stuff than cannot create from the right way... PDF.js that you can validate. (validate on IE11) then is not framework issue.
Other issue could be that some characters are not OK!! could you post your var "data"???
Regards!!!
Related
I am facing huge performance issues in loading large pdf documents (around 30/40 MB) using pdf.js
I am new to the ways it works and read a lot about it , but nothing helped.
Following is my code samples.
In HTML file
<div id="divCanvasTemplate">
<div id="divCanvasContainer-{pageIndex}" class="canvas-container">
<canvas id="cnvDesigner-{pageIndex} class="canvas-designer"></canvas>
</div>
</div>
In JS file , I have the following method.
var _loadFile = function() {
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = _workerUrl;
$ajax({
url: "GEtPDFFileBytes",
type: "GET",
data: {
"documentid": _documentId
},
success: function(result) {
var raw = atob(result);
var loadintask = pdfjsLib.getDocument({
data: raw
});
loadingtask.promise.then(function(pdfDoc_) {
_pageCount = pdfDoc_._pdfInfo.numPages;
_currentpageNumber = _getbasePage();
var canvasTemplate = $("#divCanvasTemplate").html();
var activeRange = _getActiveRange(_currentpageNumber);
for (let pagenumber = 1; pagenumber <= _pagecount; pagenumber++) {
var canvashtml = canvasTemplate.replace(/pageindex}/g, pagenumber);
$("#divMasterCanvas").append(canvasHtml);
pdfDoc = PdfDoc_;
renderPDFPage(pageNumber);
}
});
}
});
}
}
function renderPDFPage(num) {
pdfDoc.getPage(num).then(function(page) {
var currentpagenumber = page._pageindex + 1;
var viewport = page.getViewPort({
scale: scale
});
var canvas = document.getelementbyid('cnvDesigner-' + currentpagenumber);
var context = canvas.getcontext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var rendercontext = {
canvasContext: context,
viewport: viewport
};
var rendertask = page.render(rendercontext);
}
});
}
I read about using getImageData() and putImageData() in context to use in such scenario, but unable to get it work. Any help would be greatly appreciated.
My code is working correct. It's capturing and generating the whole page and prompting download too. But I need this to be saved on my server automatically in "uploads/pdfs/" folder. I actually want to send this through php mail and save it on the server instead of prompting. Please help me.
This is my script:
function makePDF() {
var quotes = document.getElementById('container-fluid');
html2canvas(quotes, {
onrendered: function(canvas) {
//! MAKE YOUR PDF
var pdf = new jsPDF('p', 'pt', 'letter');
for (var i = 0; i <= quotes.clientHeight/980; i++) {
//! This is all just html2canvas stuff
var srcImg = canvas;
var sX = 0;
var sY = 1278*i; // start 980 pixels down for every new page
var sWidth = 990;
var sHeight = 1278;
var dX = 0;
var dY = 0;
var dWidth = 990;
var dHeight = 1278;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute('width', 990);
onePageCanvas.setAttribute('height', 1278);
var ctx = onePageCanvas.getContext('2d');
// details on this usage of this function:
// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);
// document.body.appendChild(canvas);
var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
var width = onePageCanvas.width;
var height = onePageCanvas.clientHeight;
//! If we're on anything other than the first page,
// add another page
if (i > 0) {
pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
}
//! now we declare that we're working on that page
pdf.setPage(i+1);
//! now we add content to that page!
pdf.addImage(canvasDataURL, 'PNG', 0, 0, (width*.62), (height*.62));
}
pdf.save('output.php')
}
});
}
I'm trying to implement a "drag-to-pan" function for the pfd.js viewer.
However, this only works every other time, so that after panning around, I have to click the viewer again to make it re-render.
Here's the code:
var pdfScale = 1;
var activePdf;
var rotate = 0;
var addX = 0;
var addY = 0;
function renderPage(page) {
activePdf = page;
var canvas = document.getElementById('the-canvas');
var wrapperStyle = window.getComputedStyle(document.getElementsByClassName("canvas-wrapper")[0]);
var context = canvas.getContext('2d');
var viewport = page.getViewport(pdfScale, rotate);
canvas.height = parseInt(wrapperStyle.height);
canvas.width = parseInt(wrapperStyle.width);
viewport.viewBox[0] -= addX;
viewport.viewBox[2] -= addX;
viewport.viewBox[1] += addY;
viewport.viewBox[3] += addY;
addX = addY = 0;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
}
$(document).ready(function() {
var start = [0,0];
$('#the-canvas').mousedown(function(event) {
start[0] = event.screenX;
start[1] = event.screenY;
}).mouseup(function(event) {
console.log(event);
addX = event.screenX - start[0];
addY = event.screenY - start[1];
setTimeout(function() {
renderPage(activePdf);
}, 500);
});
var url = 'http://localhost/test.pdf';
// Disable workers to avoid yet another cross-origin issue (workers need
// the URL of the script to be loaded, and dynamically loading a cross-origin
// script does not work).
PDFJS.disableWorker = true;
// The workerSrc property shall be specified.
PDFJS.workerSrc = 'build/pdf.worker.js';
// Asynchronous download of PDF
var loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
renderPage(page);
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
});
Even after adding the setTimeout, it still doesn't render correctly on the first time. How can I edit my logic to make it work?
Thanks!
My scenario is:
On clicking a button, import datas on a html into a PDF file.
Since this PDF must have some complicated required style, so my first step is to transfer this page into a image using html2canvas.js and then import this image to a PDF with jsPDF.js
And when the data is too large the PDF must be split to hold all the data,to do this,so I used the codes here: https://github.com/MrRio/jsPDF/pull/397
My problem is: on firefox the splited page on PDF on page 2 or 3...cannot be shown, they are totally blank. but on page 1 it is fine. (this is for firefox)
I tested other browsers they are all fine. pls someone could throw some light on how to fix this?
Here is my plnkr:
http://plnkr.co/edit/ElvAsriK2nssq2U9pgKX?p=preview
function initTemplate(){
datas=getData();
var templateData=_.template($('#tpl').html(), datas);
$('#tplW').html(templateData);
getPDF();
// $('#tplW').append(_.template($('#tpl').html(), datas));
// $('body').html( _.template($('#tpl').html(), datas));
}
function getData(){
var htmlData=$(".MsoNormalTable .inner").find("tr.tablerow");
var datas=[];
$.each(htmlData,function(i,v){
var d=[];
var tds=$(v).find("td");
$.each(tds,function(index,val){
d.push($(val).text());
});
datas.push(d);
});
return datas;
}
function getPDF() {
// initTemplate();
html2canvas($('#tplW')[0], {
onrendered: function(canvas){
canvasToImageSuccess(canvas);
}
});
function canvasToImage (canvas){
var img = new Image();
var dataURL = canvas.toDataURL('image/png');
img.src = dataURL;
return img;
};
function canvasShiftImage (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;
};
function canvasToImageSuccess (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');
};
}
You should use canvas-to-blob and FileSaver.js
and modify this line:
pdf.save('test.pdf');
to this:
var data = pdf.output();
var buffer = new ArrayBuffer(data.length);
var array = new Uint8Array(buffer);
for (var i = 0; i < data.length; i++) {
array[i] = data.charCodeAt(i);
}
var blob = new Blob(
[array],
{type: 'application/pdf', encoding: 'raw'}
);
saveAs(blob, "test.pdf");
You can check it out here.
It worked for me on Mac, Firefox.
I found this solution here.
I use pdf.js to show pdf files, but the result is not good, please have a look at my code.
My codes are as follows.
var aaa = function (pdf, page_number) {
pdf.getPage(page_number).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = $('.pdf-view')[page_number-1];
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
};
for (var i = 1;i < 51;i++) {
aaa(pdf, i);
if (i !== 50) {
var a = '<canvas data="{{ raw_path }}" class="pdf-view hide" style="margin-bottom:10px;"></canvas>';
$('#file-view #pdf').append(a);
}
}
There is a loop, then 50 functions (aaa) execute at the same time. The effect is disastrous, and my computer gets stuck. I want to excute a function right after the last function excuted very well.
Please help me improve it. Thank a lot. (Sorry, my English is disastrous as well.)
To avoid simultaneous run of single page load and render function aaa , you should move its call to callback of the page load - .then( part so it's called recursively. And then call aaa function only once with page_number = 1.
//define page render function
var aaa = function (pdf, page_number) {
pdf.getPage(page_number).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = $('.pdf-view')[page_number-1];
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
if (i < 50) {
//render first 50 pages but not all pages except #50
aaa(pdf, i);
i++;
}
});
};
//pre-generate 50 canvases
var docFragment = document.createDocumentFragment();
for (var i = 1;i < 51;i++) {
var c = document.createElement("canvas");
$(c).data({{ raw_path }});
$(c).addClass('pdf-view hide');
$(c).css('margin-bottom', '10px');
docfrag.appendChild(c);
}
$('#file-view #pdf').append(docfrag);
//call render
var i = 1;
aaa(pdf, i);