0

I currently have PDF-Lib successfully creating a generic pdf that I'm able to view & download on my pc's browser by using an iframe or using PDFObject to put it within a div. When viewing on a mobile browser all I see is a blank page, I believe this is due to the browser not supporting inline PDFs.

I'm looking for a way to make the pdf either successfully render on a mobile browser OR force download. I've tried this solution here PDF-Lib Modify PDF Downloadable which works great on PC browser, I am able to download with no issues. On a mobile browser, nothing happens.

The best method would be for a way to have PDF-Lib force download like the above issue but working on mobile.

Here is the simple code I'm working with

HTML

<div id="thePDF"></div>
<script src="/js/app.js"></script>
<script src="/js/pdfobject.min.js"></script>
<script src="/js/pdf-lib.min.js"></script>

<style>
.downloadCert{display:none;}
.viewCert{display:inline-block;}

@media (pointer:none), (pointer:coarse) {
   .downloadCert{display:inline-block;}
   .viewCert{display:none;}
}
</style>

<div class="btn" data-action="view">View</div>
<div class="btn" data-action="download">Download</div>

Javascript

// Watch for a btn click
$('.btn').on("click", function() {
    // Generates, then renders or downloads pdf
    generatePDF(($(this).data('action') == 'download' ? true : false));
});

async function generatePDF(forceDl = false) {
    const pdfDoc = await PDFLib.PDFDocument.create();
    const pageOne = pdfDoc.addPage([350, 400]);
    pageOne.moveTo(110, 200);
    pageOne.drawText("howdy");

    if (forceDl == true) {
        const pdfBytes = await pdfDoc.save();
        // This download.js only seems to work on PC, not mobile
        download('exapmle.pdf', "application/pdf");
    } else {
        const pdfDataUri = await pdfDoc.saveAsBase64({
            dataUri: true
        });
        // Render inline
        PDFObject.embed(pdfDataUri, "#thePDF");
    }
}
Dom
  • 858
  • 2
  • 11
  • 30

0 Answers0