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");
}
}