Hopding
Set default file name for a PFD document created with pdf lib by Javascript
What were you trying to do?
I generate a PDF document using the following code snippet and it is kept loaded to a HTML iFrame.
Then user can download it if required.
I want to set the document number as the default file name. But I could not find a proper solution to set the filename using PDF-LIB library.
`
<body>
<div style="display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden;">
<iframe id="pdf" title="myTest PDF" style="flex-grow: 1; border: none; margin: 0; padding: 0;"></iframe>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/pdf-lib.min.js"></script>
<script>
createPdf();
async function createPdf() {
const pdfDoc = await PDFLib.PDFDocument.create();
pdfDoc.setSubject('PDF Subject');
pdfDoc.setTitle('PDF Title');
const page = pdfDoc.addPage([350, 400]);
page.moveTo(110, 200);
page.drawText('Hello World!');
const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true
});
document.getElementById('pdf').src = pdfDataUri;
}
</script>
</html>`
How did you attempt to do it?
I generate a PDF document using the following code snippet and it is kept loaded to a HTML iFrame.
Then user can download it if required.
I want to set the document number as the default file name. But I could not find a proper solution to set the filename using PDF-LIB library.
`
<body>
<div style="display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden;">
<iframe id="pdf" title="myTest PDF" style="flex-grow: 1; border: none; margin: 0; padding: 0;"></iframe>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/pdf-lib.min.js"></script>
<script>
createPdf();
async function createPdf() {
const pdfDoc = await PDFLib.PDFDocument.create();
pdfDoc.setSubject('PDF Subject');
pdfDoc.setTitle('PDF Title');
const page = pdfDoc.addPage([350, 400]);
page.moveTo(110, 200);
page.drawText('Hello World!');
const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true
});
document.getElementById('pdf').src = pdfDataUri;
}
</script>
</html>`
What actually happened?
I generate a PDF document using the following code snippet and it is kept loaded to a HTML iFrame.
Then user can download it if required.
I want to set the document number as the default file name. But I could not find a proper solution to set the filename using PDF-LIB library.
`
<body>
<div style="display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden;">
<iframe id="pdf" title="myTest PDF" style="flex-grow: 1; border: none; margin: 0; padding: 0;"></iframe>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/pdf-lib.min.js"></script>
<script>
createPdf();
async function createPdf() {
const pdfDoc = await PDFLib.PDFDocument.create();
pdfDoc.setSubject('PDF Subject');
pdfDoc.setTitle('PDF Title');
const page = pdfDoc.addPage([350, 400]);
page.moveTo(110, 200);
page.drawText('Hello World!');
const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true
});
document.getElementById('pdf').src = pdfDataUri;
}
</script>
</html>`
What did you expect to happen?
I generate a PDF document using the following code snippet and it is kept loaded to a HTML iFrame.
Then user can download it if required.
I want to set the document number as the default file name. But I could not find a proper solution to set the filename using PDF-LIB library.
`
<body>
<div style="display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden;">
<iframe id="pdf" title="myTest PDF" style="flex-grow: 1; border: none; margin: 0; padding: 0;"></iframe>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/pdf-lib.min.js"></script>
<script>
createPdf();
async function createPdf() {
const pdfDoc = await PDFLib.PDFDocument.create();
pdfDoc.setSubject('PDF Subject');
pdfDoc.setTitle('PDF Title');
const page = pdfDoc.addPage([350, 400]);
page.moveTo(110, 200);
page.drawText('Hello World!');
const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true
});
document.getElementById('pdf').src = pdfDataUri;
}
</script>
</html>`
How can we reproduce the issue?
I generate a PDF document using the following code snippet and it is kept loaded to a HTML iFrame.
Then user can download it if required.
I want to set the document number as the default file name. But I could not find a proper solution to set the filename using PDF-LIB library.
`
<body>
<div style="display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden;">
<iframe id="pdf" title="myTest PDF" style="flex-grow: 1; border: none; margin: 0; padding: 0;"></iframe>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/pdf-lib.min.js"></script>
<script>
createPdf();
async function createPdf() {
const pdfDoc = await PDFLib.PDFDocument.create();
pdfDoc.setSubject('PDF Subject');
pdfDoc.setTitle('PDF Title');
const page = pdfDoc.addPage([350, 400]);
page.moveTo(110, 200);
page.drawText('Hello World!');
const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true
});
document.getElementById('pdf').src = pdfDataUri;
}
</script>
</html>`
Version
1.17.1
What environment are you running pdf-lib in?
Browser
Checklist
- [X] My report includes a Short, Self Contained, Correct (Compilable) Example.
- [X] I have attached all PDFs, images, and other files needed to run my SSCCE.
Additional Notes
No response
are you using a HTML link for the "Save" button? if so, try the download attribute to set the filename like: <a … download="myFilename.pdf"> (Note: this isn't specific to pdf-lib.js, just a HTML feature).
Wish this feature is added to the lib. It's pretty common to want to set filename in the file metadata. In the screenshot, I created this PDF by merging pages of existing PDFs I received from a server. (If it was being combined on the server side, I could try & do it on server-side.)
