I'm trying to load image into PDF using jspdf javascript library.I can successfully get data of image however output PDF is not showing any image.
Below is complete code snippet.
<script type="text/javascript" src="js/jspdf/base64.js"></script>
<script type="text/javascript" src="js/jspdf/sprintf.js"></script>
<script type="text/javascript" src="js/jspdf/jspdf.js"></script>
var createPDF = function(imgData) {
var doc = new jsPDF();
alert("before create pdf ::::");
doc.addImage(imgData, 'JPEG', 10, 10, 500, 500);
//doc.addImage(imgData, 'JPEG', 70, 10, 100, 120);
// Output as Data URI
doc.output('datauri');
}
var darthImgData;
function childCanvas()
{
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
darthImgData = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);
// Convert the data to binary form
darthImgData = atob(darthImgData);
alert(darthImgData);
createPDF(darthImgData);
};
imageObj.src = 'thinking-monkey.jpg';
}
Please help me in this regard.
At last, I found the solution for above said issue.JSPDF team added javascript plugin for adding image in generated PDF files in client-side JavaScript.
I've added below jspdf scripts in my code, was able to generate PDF with image.
<script type="text/javascript" src="js/jspdf/jspdf.plugin.addimage.js"></script>
Related
I'm trying to convert html element into pdf. Everything is working fine , but it doesn't render the aws image in pdf.
Even though if i add a local path to the img src attribute then it render's that image in pdf.
const invoiceSection = $("#customer_invoice_bill");
let invoiceName = invoiceSection.data("invoiceName");
$("#btnDownloadInvoice").on("click", function () {
var pdfConf = {
pagesplit: true,
background: "#fff",
image: { type: "webp", quality: 0.98 }, // as per req
html2canvas: { dpi: 300, letterRendering: true, useCORS: true },
};
var pdf = new jsPDF("p", "pt", [
invoiceSection.height() + 100,
invoiceSection.width(),
]);
pdf.addHTML(invoiceSection, pdfConf, function () {
pdf.save(`${invoiceName}.pdf`);
});
});
this is the html element
https://i.stack.imgur.com/gEua9.png
this is how pdf is rendered without image. but it rendered the last image which is below(signature) as i have assign a local path to the src=""
https://i.stack.imgur.com/M3qrT.png
Hi
i'm struggling browsing a pdf inline well on mobile and Desktop
env is vite 3.1.3, rails 7.0.4
Desktop i brought to run on all Browsers by mozilla/pdfjs but on mobile it doesnt show anything.
My Code is (on Rails)
view
<canvas id="the-canvas"></canvas>
javascript
// NPM
import * as pdfjsLib from 'pdfjs-dist/build/pdf'
window.showMozillaPdf = function () {
var pdfData = atob(gon.doc_b64);
console.log(pdfjsLib)
pdfjsLib.GlobalWorkerOptions.workerSrc = '/documents/pdfjs_worker';
console.log('pdf-part-2!')
var loadingTask = pdfjsLib.getDocument({data: pdfData});
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');
var scale = 1.5;
var viewport = page.getViewport({scale: scale});
// Prepare canvas using PDF page dimensions
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
}
The workers js (/documents/pdfjs_worker) i inserted from a controller because of mime type conflicts. This can be made nicer but it runs now.
This runs well on desktop but doesnt show anything on Mobile (iPhone 11 / Safari)
Has anyone experience with mozilla/pdfjs on Mobile?
thanks,
Chris
found it
i had to change the way for getting the url to the worker asset:
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf'
import workerUrl from 'pdfjs-dist/legacy/build/pdf.worker.min?url'
...
pdfjsLib.GlobalWorkerOptions.workerSrc = workerUrl;
this replaces the '/documents/pdfjs_worker'
and i had to use the /legacy/ for getting it to run on mobile.
See vite-docs
I want to display a pdf as an image on canvas using angular7 and fabric js
i am not able to find any code to try in angular7
Finally i am able to solve this...i have used pdfjsLib and i have imported in my ts file (import * as pdfjsLib from 'pdfjs-dist/build/pdf';)
public src="/assets/myPhotos.pdf";
showPdf(){
pdfjsLib.getDocument(this.src).then(doc =>{
// console.log("this file has "+ doc._pdfInfo.numPages+ "pages");
doc.getPage(1).then(page => {
var myCanvas = <HTMLCanvasElement>document.getElementById("my_canvas");
var context = myCanvas.getContext("2d");
var scale = 1.5;
var viewport = page.getViewport(scale);
myCanvas.width = viewport.width;
myCanvas.height = viewport.height;
page.render({
canvasContext : context,
viewport : viewport
})
})
});
}
I´m trying to generate a PDF on my application, using something like this, from documentation:
var doc = new jsPDF();
doc.html(document.body, {
callback: function (doc) {
doc.save();
}
});
But what I need is to get this generated file, as a base64 content, to send as an attachment on an email. Is there a way to get this directly on callback?
It's worth noting that the datauri option changes the document location, see the following snippet from jsPDF lib:
case 'datauri':
case 'dataurl':
return global.document.location.href = datauri;
This is fine unless you are trying to use an IFrame, as it would cause its body to be replaced by an embed tag displaying the pdf just generated.
Instead, the safest option is to use datauristring as this simply returns the pdf in a base64 string:
var pdf = new jsPDF('p', 'pt', 'a4');
var base = pdf.output('datauristring'); // base64 string
console.log("base64 is ", base);
Honestly, I don't know why anybody would want to use the datauri option instead of datauristring as latter's behaviour it's what most people expect anyway.
You can do like below.
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(document.getElementById('doc'), {
callback: function (pdf) {
// example text
pdf.text(20, 20, 'Hello world!');
pdf.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
var base = pdf.output('datauri'); // directly to base664
console.log("base64 is ");
console.log(base);
// you can generate in another format also like blob
var out = pdf.output('blob');
var reader = new FileReader();
reader.readAsDataURL(out);
reader.onloadend = function() { // for blob to base64
base64data = reader.result;
console.log("base64 data is ");
console.log(base64data );
}
pdf.save('DOC.pdf');
}
})
You can see more on output() method in the following link.
jspdf output() source code
Below code will generate a pdf which contains only text and does not include any images or styles.
var doc = new jsPDF();
var source = document.getElementById("dividofhtml");
doc.fromHTML(source,15,15);
doc.save();
The below code will include images and css styling in pdf.
html2canvas($("#up"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 0, 0);
doc.save('text.pdf');
}
});