Develop Reference

can we convert docx file into PDF using javascript without js libraries

I want to create LWC component in which I have one file selector which is uploading '.pdf', '.png','.jpg','.jpeg','.docx','.doc' types of file in salesforce. but on button click I want that file to get converted into PDF and gets download immediately.
Is it possible to convert file using js in LWC?.
I got this code but it is only working on string containing HTML element. I want it to work on whole file.
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF();
// Source HTMLElement or a string containing HTML.
var elementHTML = document.querySelector("#content");
doc.html(elementHTML, {
callback: function(doc) {
// Save the PDF
doc.save('sample-document.pdf');
},
margin: [10, 10, 10, 10],
autoPaging: 'text',
x: 0,
y: 0,
width: 190, //target width in the PDF document
windowWidth: 675 //window width in CSS pixels
});

pdfMake / html2canvas is way too big for PDF output, how to resize?

I'm trying to convert a section of my HTML page into a PDF file. I don't want the whole page because it contains buttons, etc. that aren't necessary.
So I created a div that has a height 0 and adding the content I need to print into the underlying div then removed elements and printed. All my code is below. It works well but the pdf is WAY too zoomed in and I can't fix it. I've attached my code and resulting pdf output below. I've tried so many different settings. Does anyone have tips?
<div style="overflow: hidden; height: 0;">
<div id="mainClone"></div>
</div>
function printPDF()
{
html2canvas($('#mainClone'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
pageSize: {
width: 1000,
height: 'auto'
},
content: [{
image: data,
//width: width,
//height: height,
}],
pageSize: 'letter',
pageOrientation: 'landscape',
pageMargins: [ 5, 5, 5, 5 ],
};
pdfMake.createPdf(docDefinition).download("test.pdf");
}
});
}
$('#PrintPDF').click(function () {
$('#mainClone').html($('#main').html());
$('#mainClone').find(".calendar-prev").hide();
//remove more html elemnent we don't need
printPDF();
});

You can make it while still using jspdf, instead of creating an extra div, go with your default page and with any unnecessary element(which you do not want into your PDF) add this
data-html2canvas-ignore="true"
to each unnecessary element.
this will ignore that element and will not put into your generated PDF.

PDF is incomplete when printed

I'm using JSPDF and addHTML for printing PDF on fly. Problem is that on normal page it works fine but when I want to print modal screen i.e. popup, it only prints the Modals visible portion of the screen and the other part after scrolling is blank in PDF. I tried using split screen but still is shows blank portion.
const el = document.getElementById('card');
let options = {
pagesplit: true
};
var pdf = new jsPDF({
orientation: 'landscape',
unit: 'in',
format: [20, 18]
})
pdf.addHTML(el, 0, 0, options, () => {
pdf.save('card.pdf');
});

trying to modify the js function so that it gives the same output as it was when called the other js function

I am exporting the content on the webpage to the PDF file, for this i have used jsPDF API and i could able to get it work but now i want to use html2PDF as it resolves few issues which were faced when using jsPDF API.
I have written the function $scope.exportUsingJSPDF which is called when the button Export Using JSPDF is clicked. Similarly i want to implement the function $scope.exportUsingHTML2PDF which uses html2PDF API but could not succeed. Any inputs on how to modify $scope.exportUsingHTML2PDF so that it iterates the divs and shows the div content as shown when invoked using $scope.exportUsingJSPDF by clicking Export using JSPDF API.
Complete online example: https://plnkr.co/edit/454HUFF3rmLlkXLCQkbx?p=preview
js code:
//trying to implement the below function same as $scope.exportUsingJSPDF, so
// that when user click on Export using HTML2PDF button, it exports the content to the PDF and generaes the PDF.
$scope.exportUsingHTML2PDF = function(){
var pdf = new jsPDF('l', 'pt', 'a4');
var pdfName = 'test.pdf';
pdf.canvas.height = 72 * 11;
pdf.canvas.width = 72 * 8.5;
html2pdf(document.getElementByClassName("myDivClass"), pdf, function(pdf){
pdf.save(pdfName);
});
}
$scope.exportUsingJSPDF = function() {
var pdf = new jsPDF('p','pt','a4');
var pdfName = 'test.pdf';
var options = { pagesplit: true};
var $divs = $('.myDivClass') //jQuery object of all the myDivClass divs
var numRecursionsNeeded = $divs.length -1; //the number of times we need to call addHtml (once per div)
var currentRecursion=0;
//Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
//Once we have done all the divs save the pdf
if(currentRecursion==totalRecursions){
pdf.save(pdfName);
}else{
currentRecursion++;
pdf.addPage();
//$('.myDivClass')[currentRecursion] selects one of the divs out of the jquery collection as a html element
//addHtml requires an html element. Not a string like fromHtml.
pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
console.log(currentRecursion);
recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
});
}
}
pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
});
}
PS: I was trying to modify $scope.exportUsingHTML2PDF so that it gives the same output as generated when clicked on "Export using JSPDF" button which calls the function $scope.exportUsingJSPDF.

The problem lies with your function using exportUsingHTML2PDF, the error is that you need to pass in the html to the function of html2PDF. Manage the page css on the basis of your need.
EDIT: You have wrong library. Please check html2pdf.js library within the plunker
Working plunker: html2pdf
$scope.exportUsingHTML2PDF = function() {
var element = document.getElementById('element-to-print');
html2pdf(element, {
margin: 1,
filename: 'myfile.pdf',
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
dpi: 192,
letterRendering: true
},
jsPDF: {
unit: 'in',
format: 'letter',
orientation: 'portrait'
}
});
}

With JSPDF and HTML2PDF, you have to get used to two fundamentally different coding styles:
JSPDF: imperative (javascript statements)
HTML2PDF: declarative (directives embedded in HTML)
So for page breaks:
JSPDF: pdf.addPage();
HTML2PDF: <div class="html2pdf__page-break"></div>
That should work, however HTML2PDF is buggy and gives a "Supplied data is not a JPEG" error when <div class="html2pdf__page-break"></div> is included (at least it does so for me, in Plunkr), despite being totally what the documentation tells us to do.
I haven't got time to debug it. You'll need to do some research. Someone will have posted a solution somewhere on the web.

convert just specific HTML table columns to PDF using jsPDF && jsPDF AutoTable

I'm trying to figure out how to convert just specific columns into PDF file. In this time I'm able to print just all the columns of the table but I don't need all of them.
This is how I ipmlemented conversion:
function demoPDF() {
var pdf = new jsPDF('l', 'pt', 'a4');
var res = pdf.autoTableHtmlToJson(document.getElementById("tableToConvert"));
pdf.autoTable(res.columns, res.data, {
startY: 60,
tableWidth: 'auto',
columnWidth: 'auto',
styles: {
overflow: 'linebreak'
}
});
pdf.save("pdfExample.pdf");
};
Don't you have any idea how to solve it?

Check for bold text.
Refer from https://github.com/simonbengtsson/jsPDF-AutoTable
autoTableHtmlToJson(tableElem, includeHiddenElements) Use it to
generate the javascript objects required for this library from an html
table (see from html example). If includeHiddenElements is set to true
hidden rows and columns will be included otherwise excluded.
So, for your case, you need to change the code like below:
var res = pdf.autoTableHtmlToJson(document.getElementById("tableToConvert"), false);