I'm trying to convert a a specific set of divs into a pdf using jsPDF.
This is what I have so far.
function to convert:
makePdf() {
const pdf = new jsPDF('p', 'px', 'a4');
pdf.canvas.height = 1020;
pdf.canvas.width = 800;
const self = this;
pdf.html(this.el.nativeElement, {
callback: (pdf) => {
pdf.save("Summary.pdf")
}
})
}
How do I select the Divs I wanna convert?
Related
I need extarct svg element with text from pdf. But if i did like this:
PDF:
Pdf link https://dropfiles.org/2dTlpxTN
const PDF_PATH = "https://dropfiles.org/2dTlpxTN";
const PAGE_NUMBER = 1;
const PAGE_SCALE = 1.5;
const SVG_NS = "http://www.w3.org/2000/svg";
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
function buildSVG(viewport, textContent) {
// Building SVG with size of the viewport (for simplicity)
const svg = document.createElementNS(SVG_NS, "svg:svg");
svg.setAttribute("width", viewport.width + "px");
svg.setAttribute("height", viewport.height + "px");
// items are transformed to have 1px font size
svg.setAttribute("font-size", 1);
// processing all items
textContent.items.forEach(function (textItem) {
// we have to take in account viewport transform, which includes scale,
// rotation and Y-axis flip, and not forgetting to flip text.
const tx = pdfjsLib.Util.transform(
pdfjsLib.Util.transform(viewport.transform, textItem.transform),
[1, 0, 0, -1, 0, 0]
);
const style = textContent.styles[textItem.fontName];
// adding text element
const text = document.createElementNS(SVG_NS, "svg:text");
text.setAttribute("transform", "matrix(" + tx.join(" ") + ")");
text.setAttribute("font-family", style.fontFamily);
text.textContent = textItem.str;
svg.append(text);
});
return svg;
}
async function pageLoaded() {
// Loading document and page text content
const loadingTask = pdfjsLib.getDocument({ url: PDF_PATH });
const pdfDocument = await loadingTask.promise;
const page = await pdfDocument.getPage(PAGE_NUMBER);
const viewport = page.getViewport({ scale: PAGE_SCALE });
const textContent = await page.getTextContent();
// building SVG and adding that to the DOM
const svg = buildSVG(viewport, textContent);
document.getElementById("pageContainer").append(svg);
// Release page resources.
page.cleanup();
}
document.addEventListener("DOMContentLoaded", function () {
if (typeof pdfjsLib === "undefined") {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
return;
}
pageLoaded();
});
I extracted text with out Font and i extract all text. I need extract text as image.
If i do this:
pdfDoc_.getPage(pageNumber).then(function (page) {
var canvasEl = document.createElement('canvas');
var context = canvasEl.getContext('2d');
var viewport = page.getViewport({scale: imagesSetting_reader.scaleText});
canvasEl.height = viewport.height;
canvasEl.width = viewport.width;
var back;
var renderContext = {
canvasContext: context,
background:back,
viewport: viewport
};
page.render(renderContext).promise.then(function () {
resolve(canvasEl.toDataURL("image/png"));
})
});
It extracted text and background image.
if i do like this :
page.getOperatorList().then(opList => {
var svgGfx = new pdfjsLib.SVGGraphics(page.commonObjs, page.objs);
return svgGfx.getSVG(opList, viewport);
}).then(svg => {
console.log(svg)
return svg;
});
And extracted text from svg, i got error :
error on line 1 at column 101: Namespace prefix svg on svg is not defined
How i can extract only svg text with font and convert it to image ?
Like this:
I found below code and trying to modify it to print an specific div element. Below code opens print dialog but shows empty screen. I dont know where to put my id of div element in the code.
print(){
var doc = new jsPDF("portrait", "mm", "a4");
doc.autoPrint();
const hiddFrame = document.createElement('iframe');
hiddFrame.style.position = 'fixed';
// "visibility: hidden" would trigger safety rules in some browsers like safari，
// in which the iframe display in a pretty small size instead of hidden.
// here is some little hack ~
hiddFrame.style.width = '1px';
hiddFrame.style.height = '1px';
hiddFrame.style.opacity = '0.01';
const isSafari = /^((?!chrome|android).)*safari/i.test(window.navigator.userAgent);
if (isSafari) {
// fallback in safari
hiddFrame.onload = () => {
try {
hiddFrame.contentWindow.document.execCommand('print', false, null);
} catch (e) {
hiddFrame.contentWindow.print();
}
};
}
var blob = doc.output("blob");
window.open(URL.createObjectURL(blob), '_blank');
}
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');
}
});