skip to Main Content

I want to save this html code to PDF:

<div id="mycontent">
    <h1>Sample PDF from HTML</h1>
    <p>This text you'll find in PDF page.</p>
</div>

Javascript I am using is:

const mycontent = document.getElementById('mycontent').outerHTML;

const blob = new Blob([mycontent], { type: 'application/pdf' });

const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'file.pdf';

document.body.appendChild(link);
link.click();

document.body.removeChild(link);

I can see the dialog to save and after save, I open the file to read it. I am getting this message:

The content type is not valid to read the file or the file is damaged.

What is wrong?

2

Answers


  1. You won’t magically get a PDF just by saving some HTML text in a file with the extension .pdf.

    You’ll need a library like jsPDF or html2pdf to layout the text on a page, then write it out as a PDF file – or, of course, you can read the PDF specification and write a PDF-writing implementation yourself – it’s just about 700 pages.

    Login or Signup to reply.
  2. What you need is a block of code to download

    <div id="mycontent"><code>
    %PDF-1.2
    1 0 obj<</Type/Catalog/Pages 2 0 R>>endobj
    2 0 obj<</Type/Pages/Count 1/Kids[3 0 R]>>endobj
    3 0 obj<</Type/Page/Resources<</Font<</F4 4 0 R/F5 5 0 R>>>>/MediaBox[0 0 595 842]/Contents 6 0 R/Parent 2 0 R>>endobj
    4 0 obj<</Type/Font/BaseFont/Helvetica-Bold/Subtype/Type1/Encoding/WinAnsiEncoding/FirstChar 32/LastChar 255>>endobj
    5 0 obj<</Type/Font/BaseFont/Helvetica/Subtype/Type1/Encoding/WinAnsiEncoding/FirstChar 32/LastChar 255>>endobj
    6 0 obj
    <</Length 310>>
    stream
    q .24 0 0 -.24 0 842 cm 116.6667 116.6667 2245.8336 3275.0003 re W* n q
    /P <</MCID 0>> BDC 3.1250 0 0 3.1250 116.6667 116.6667 cm 0 0 0 rg 0 0 0 RG BT /F4 32 Tf 1 0 0 -1 8 37 Tm (Sample PDF from HTML) Tj EMC ET
    /P <</MCID 1>> BDC BT /F5 16 Tf 1 0 0 -1 8 80 Tm (This text you'll find in PDF page) Tj EMC ET
    Q
    Q
    
    endstream
    endobj
    
    xref
    0 7
    0000000000 65536 f 
    0000000009 00000 n 
    0000000052 00000 n 
    0000000101 00000 n 
    0000000220 00000 n 
    0000000337 00000 n 
    0000000449 00000 n 
    
    trailer
    <</Size 7/Root 1 0 R>>
    startxref
    809
    %%EOF
    </code></div>
    

    If you write it as a file (TEXT.PDF) and get all those decimal numbers correct it should work, as intended after download so here:

    enter image description here

    Clearly this is a problematic method as that code bit&byte stream needs to be file name length handled with the correct "Decimal" memory file stream addresses. The simplest way arround that is convert the "file BLOB" into a larger "data BLOB" then add that as a data:uri.

    I have included that here but Web site security will usually not alow serving so right click and download should work. Or cut and paste the web page below into a html file.

    <!DOCTYPE html>
    <!-- saved from url=(0098)https://stackoverflow.com/questions/78207541/pdf-javascript-html-pdf-is-damaged-or-incorrect-file# -->
        <title>pdf/javascript/html: pdf is damaged or incorrect file - Stack Overflow</title>
    <body>
    <a href="https://stackoverflow.com/questions/78207541/pdf-javascript-html-pdf-is-damaged-or-incorrect-file#"><span></span></a>
    <iframe  src="data:application/pdf;base64,JVBERi0xLjIKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0NvdW50IDEvS2lkc1szIDAgUl0+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1Jlc291cmNlczw8L0ZvbnQ8PC9GNCA0IDAgUi9GNSA1IDAgUj4+Pj4vTWVkaWFCb3hbMCAwIDU5NSA4NDJdL0NvbnRlbnRzIDYgMCBSL1BhcmVudCAyIDAgUj4+ZW5kb2JqCjQgMCBvYmo8PC9UeXBlL0ZvbnQvQmFzZUZvbnQvSGVsdmV0aWNhLUJvbGQvU3VidHlwZS9UeXBlMS9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcvRmlyc3RDaGFyIDMyL0xhc3RDaGFyIDI1NT4+ZW5kb2JqCjUgMCBvYmo8PC9UeXBlL0ZvbnQvQmFzZUZvbnQvSGVsdmV0aWNhL1N1YnR5cGUvVHlwZTEvRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nL0ZpcnN0Q2hhciAzMi9MYXN0Q2hhciAyNTU+PmVuZG9iago2IDAgb2JqCjw8L0xlbmd0aCAzMTA+PgpzdHJlYW0KcSAuMjQgMCAwIC0uMjQgMCA4NDIgY20gMTE2LjY2NjcgMTE2LjY2NjcgMjI0NS44MzM2IDMyNzUuMDAwMyByZSBXKiBuIHEKL1AgPDwvTUNJRCAwPj4gQkRDIDMuMTI1MCAwIDAgMy4xMjUwIDExNi42NjY3IDExNi42NjY3IGNtIDAgMCAwIHJnIDAgMCAwIFJHIEJUIC9GNCAzMiBUZiAxIDAgMCAtMSA4IDM3IFRtIChTYW1wbGUgUERGIGZyb20gSFRNTCkgVGogRU1DIEVUCi9QIDw8L01DSUQgMT4+IEJEQyBCVCAvRjUgMTYgVGYgMSAwIDAgLTEgOCA4MCBUbSAoVGhpcyB0ZXh0IHlvdSdsbCBmaW5kIGluIFBERiBwYWdlKSBUaiBFTUMgRVQKUQpRCgplbmRzdHJlYW0KZW5kb2JqCgp4cmVmCjAgNwowMDAwMDAwMDAwIDY1NTM2IGYgCjAwMDAwMDAwMDkgMDAwMDAgbiAKMDAwMDAwMDA1MiAwMDAwMCBuIAowMDAwMDAwMTAxIDAwMDAwIG4gCjAwMDAwMDAyMjAgMDAwMDAgbiAKMDAwMDAwMDMzNyAwMDAwMCBuIAowMDAwMDAwNDQ5IDAwMDAwIG4gCgp0cmFpbGVyCjw8L1NpemUgNy9Sb290IDEgMCBSPj4Kc3RhcnR4cmVmCjgwOQolJUVPRgo="/></iframe>
    </body></html>

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search