I am nonetheless fairly new to internet elements (see my put up again in Might, My First Internet Part), however I have been enjoying with them, and different libraries that wrap them, on and off. Just lately I made a decision to revisit one thing I had tried on the time I first performed with the know-how, a wrapper for Adobe’s PDF Embed library.
On the time, I could not get my code working as a result of the PDF Embed library requires the ID worth of a div to make use of when rendering the PDF. When utilizing an online part, you sometimes work with the Shadow DOM, a DOM tree “hidden” inside the online part. Whereas it is potential to make the DOM tree accessible to exterior code, the PDF Embed library nonetheless could not use it. It requires a string for the ID and it needs to be out there through ‘common’ means, i.e. doc.querySelector('#TheIDValHere'). I’ve already filed an ER with our engineers so as to add help for passing in an HTML factor as an alternative, however within the meantime, I simply moved on.
Till in the present day. When randomly, this popped again into my head, and I puzzled – can an online part add stuff to the wrapping DOM round it? Seems it actually can. It is frowned upon, and you shouldn’t do it sometimes, however I believe it is a case the place it is smart. In my case, I made a decision to easily append the DIV factor I would like instantly after my internet part.
Let me share the code, after which I am going to present it in motion. This is all the part:
Beautify…
import {
v4 as uuidv4
} from 'https://jspm.dev/uuid';
class PDFEmbed extends HTMLElement {
constructor() {
tremendous();
this.divid = uuidv4();
const wrapper = doc.createElement('div');
wrapper.id = this.divid;
if (this.hasAttribute('url')) this.url = this.getAttribute('url');
if (this.hasAttribute('key')) this.key = this.getAttribute('key');
if (this.hasAttribute('width')) this.width = this.getAttribute('width');
else this.width="500px";
if (this.hasAttribute('peak')) this.peak = this.getAttribute('peak');
else this.peak="500px";
this.embedMode="FULL_WINDOW";
if (this.hasAttributes('embedMode')) this.embedMode = this.getAttribute('embedMode');
// if no url, protected to only return?
if (!this.url) {
console.error('pdf-embed: No url attribute handed.');
return;
}
// Ditto for key
if (!this.key) {
console.error('pdf-embed: No key attribute handed.');
return;
}
this.identify = this.url.break up("https://www.raymondcamden.com/").pop();
wrapper.fashion = `width: ${this.width}; peak: ${this.peak}`;
this.parentNode.insertBefore(wrapper, this.nextSibling);
}
loadPDF() {
var adobeDCView = new AdobeDC.View({
clientId: this.key,
divId: this.divid
});
adobeDCView.previewFile({
content material: {
location: {
url: this.url
}
},
metaData: {
fileName: this.identify
}
}, {
embedMode: this.embedMode
});
}
connectedCallback() {
/*
the beneath doesnt work in my check the place I've 2 proper after one another, but it surely makes
sense, we've not loaded but. Nonetheless, if I exploit JS so as to add a brand new pdf-embed factor, in idea,
this optimization will work.
*/
if (window.AdobeDC) {
this.loadPDF();
return;
}
const script = doc.createElement('script');
script.kind="textual content/javascript";
script.src="https://documentservices.adobe.com/view-sdk/viewer.js";
doc.head.appendChild(script);
if (window.AdobeDC) this.loadPDF();
else doc.addEventListener('adobe_dc_view_sdk.prepared', () => this.loadPDF());
}
}
customElements.outline('pdf-embed', PDFEmbed);
I start by importing the uuid bundle. That is one thing I’ve utilized in Node fairly a bit, but it surely’s the primary time I’ve used it in a client-side utility. I am utilizing this to generate a novel ID for my DIVs. This fashion if an individual makes 2, or extra, PDF Embed situations on their internet web page, the div will at all times have a novel ID. I might have made it an tag attribute, however why make the person do work they actually need not? (Though actually as I write this, I do see why permitting the person to set it might be good – for styling functions for instance.)
Happening – my part requires the URL of the PDF and the shopper key (PDF Embed is free, however requires a domain-locked key). I then have non-compulsory arguments for width, peak, and embed mode. (See our docs for examples of those completely different modes.)
Lastly I’ve the essential half – the place I drop the div within the dad or mum:
this.parentNode.insertBefore(wrapper, this.nextSibling);
Once more, this isn’t what you’d usually do, but it surely labored simply effective for me. Persevering with on, subsequent take a look at connectedCallback. This will probably be fired when the part is loaded and is how I deal with loading within the exterior library. Because the long-winded remark says, I did attempt to load this solely as soon as, however in my testing of two embeds proper subsequent to one another, my examine didn’t work. It was anticipated, and because the remark suggests, I consider the optimization will work accurately if embeds are loaded later through JavaScript.
Going again up, loadPDF is vanilla PDF Embed code to render the doc within the DIV. Oh, our library additionally requires a “identify” worth for PDFs. I believe that is foolish so I simply create it myself based mostly on the URL.
As soon as that is included in your internet venture, I freaking love how straightforward it’s to make use of:
<pdf-embed
url="https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"
key="9861538238544ff39d37c6841344b78d"
></pdf-embed>
Or with peak, width, and mode:
<pdf-embed
url="./adobe-developer-terms.pdf"
key="9861538238544ff39d37c6841344b78d"
width="90%" peak="500"
embedMode="SIZED_CONTAINER"
></pdf-embed>
If you wish to see the part or probably even make some edits, you’ll find it right here:
https://github.com/cfjedimaster/webdemos/blob/grasp/webcomponents/pdfembed.js
I additionally put it up on CodePen right here:
See the Pen PDF Embed WC by Raymond Camden (@cfjedimaster) on CodePen.
As at all times, let me know what you suppose, and bear in mind I am nonetheless new at this, so be light. 😉
