pdf-component

Web component to render pdf documents on any html.

Javascript

<script type="module" src="https://unpkg.com/pdf-component/dist/pdf-component/pdf-component.esm.js"></script>

<pdf-component src="path-to-document.pdf"></pdf-component>

React

npm i pdf-component-react

import { PdfComponent } from 'component-library-react';

render() {
    return <PdfComponent src="path-to-document.pdf" />;
}

Vue

npm i pdf-component

import Vue from 'vue';
import App from './App.vue';

import { applyPolyfills, defineCustomElements } from 'pdf-component/loader';

Vue.config.productionTip = false;

// Tell Vue to ignore all components defined in the pdf-component
// package.
Vue.config.ignoredElements = [/pdf-component/];

// Bind the custom elements to the window object
applyPolyfills().then(() => {
    defineCustomElements();
});

new Vue({
    render: h => h(App)
}).$mount('#app');

The components should then be available in any of the Vue components

render() {
    return (
      <div>
        <pdf-component src="path-to-document.pdf"></pdf-component>
      </div>
    );
}

More info: https://stenciljs.com/docs/vue

Angular

npm i pdf-component-angular

import { PdfComponent } from 'pdf-component-angular';
import { SomeComponent } from './some.component';

@NgModule({
  imports: [PdfComponent],
  declarations: [SomeViewComponent],
  exports: [SomeComponent]
})
export class SomeViewModule {}

Usage in your templates:

<pdf-component src="path-to-document.pdf"></pdf-component>