This component is a wrapper around the pdf.js library to display PDF files in the browser.
You can install this component via npm:
npm i @dbp-toolkit/pdf-viewer
<dbp-pdf-viewer></dbp-pdf-viewer>
<script type="module" src="node_modules/@dbp-toolkit/pdf-viewer/dist/dbp-pdf-viewer.js"></script>
Or directly via CDN:
<dbp-pdf-viewer></dbp-pdf-viewer>
<script type="module" src="https://unpkg.com/@dbp-toolkit/pdf-viewer@0.0.7/dist/dbp-pdf-viewer.js"></script>
-
lang
(optional, default:de
): set tode
oren
for German or English- example
<dbp-pdf-viewer lang="de" client-id="my-client-id"></dbp-pdf-viewer>
- example
-
auto-resize
(optional, default:cover
)- set to
contain
to resize the viewed PDF to fit the container horizontally and vertically - set to
cover
to resize the viewed PDF to fit the container horizontally only, vertically the PDF can exceed the container - example
<dbp-pdf-viewer auto-resize="contain"></dbp-pdf-viewer>
- set to
-
showPDF(file: File)
: Opens a PDF file. The file must be aFile
object.- example
document.querySelector('dbp-pdf-viewer').showPDF(file);
- example
You can use the showPDF
method to open a PDF file. This method accepts a File
object as parameter.
<input @change=${this.openFile} type="file" />
<dbp-pdf-viewer lang="en"></dbp-pdf-viewer>
<script type="module" src="https://unpkg.com/@dbp-toolkit/pdf-viewer@0.0.7/dist/dbp-pdf-viewer.js"></script>
<script>
document.querySelector('input').addEventListener('change', function(e) {
if (e.target.files[0]) {
let file = e.target.files[0];
console.log('You selected ' + file.name);
document.querySelector('dbp-pdf-viewer').showPDF(file);
}
});
</script>
See example/index.html for a working example.
# get the source
git clone git@github.com:digital-blueprint/toolkit.git
cd toolkit/packages/pdf-viewer
# install dependencies
npm install
# constantly build dist/bundle.js and run a local web-server on port 8002
npm run watch
# run tests
npm test
# build local packages in dist directory
npm run build
Jump to http://localhost:8002 and you should get a demo page.