OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Seeking a solution to convert HTML code to a PDF

  • Thread starter Thread starter Nguyễn Sơn
  • Start date Start date
N

Nguyễn Sơn

Guest
My tool code convert content to image

I am trying to convert HTML and CSS to a PDF file using JavaScript, but my current implementation with html2pdf converts the content to an image, which makes the PDF non-searchable and non-selectable. Can someone give me some solution to fix this?

Code:
window.onload = function () {
    document.getElementById("download").addEventListener("click", () => {
        const allvoice = document.getElementById("allvoice");

        var opt = {
            margin : [20,0],
            filename: 'myfile.pdf',
            image: { type: 'png', quality: 0.98 }, 
            html2canvas: {
                scale: 2,
                logging: true,
                dpi: 192,
                letterRendering: true
            },
            jsPDF: {
                unit: 'mm',
                format: 'a4',
                orientation: 'landscape',
            },
            pagebreak: {  mode: ['avoid-all', 'css', 'legacy'] }
        };

        html2pdf().from(allvoice).set(opt).toPdf().get('pdf').then(function(pdf) {
            var totalPages = pdf.internal.getNumberOfPages();
            for (i = 1; i <= totalPages; i++) {
                pdf.setPage(i);
                pdf.setFontSize(10);
                pdf.setTextColor(100);
                pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth() / 2.3), (pdf.internal.pageSize.getHeight() - 0.8));
            }
        }).save();
    });
}

I am using html2pdf by EKOOPMANS
<p>My tool code convert content to image</p>
<p>I am trying to convert HTML and CSS to a PDF file using JavaScript, but my current implementation with html2pdf converts the content to an image, which makes the PDF non-searchable and non-selectable. Can someone give me some solution to fix this?
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function () {
document.getElementById("download").addEventListener("click", () => {
const allvoice = document.getElementById("allvoice");

var opt = {
margin : [20,0],
filename: 'myfile.pdf',
image: { type: 'png', quality: 0.98 },
html2canvas: {
scale: 2,
logging: true,
dpi: 192,
letterRendering: true
},
jsPDF: {
unit: 'mm',
format: 'a4',
orientation: 'landscape',
},
pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
};

html2pdf().from(allvoice).set(opt).toPdf().get('pdf').then(function(pdf) {
var totalPages = pdf.internal.getNumberOfPages();
for (i = 1; i <= totalPages; i++) {
pdf.setPage(i);
pdf.setFontSize(10);
pdf.setTextColor(100);
pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth() / 2.3), (pdf.internal.pageSize.getHeight() - 0.8));
}
}).save();
});
}</code></pre>
</div>
</div>
</p>
<p>I am using html2pdf by EKOOPMANS</p>
Continue reading...
 

Latest posts

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top