Utilizing the Adobe PDF EMbed API with Vue 3

A very long time in the past, okay, February of final 12 months, I posted about utilizing the Adobe PDF Embed library with Vue.js: Utilizing the PDF Embed API with Vue.js. The principle subject with our Embed library and libraries like Vue is a “rooster and egg” subject. Mainly, our docs inform you so as to add an occasion listener for our library to load, but it surely’s doable that the library has loaded earlier than you add the occasion listener.

In my earlier publish, I talked about how one can nonetheless use the occasion listener, but additionally search for window.AdobeDC to see if it is loaded. This methodology would apply to any framework wanting to utilize the library so it is a good tip basically.

Right now, a person on our boards posted that they have been having points with the library and Vue 3, though it was one thing fully totally different.

First off – they did not have the “rooster/egg” subject I described above. They have been loading our library dynamically in mounted:

mounted() {
doc.addEventListener("adobe_dc_view_sdk.prepared", () => {
	this.adobeApiPDFReady = true;
	console.log("Adobe created with adobe_dc_view_sdk.prepared");
});

// Dynamically load Adobe SDK Viewer for this web page
const plugin = doc.createElement("script");
plugin.setAttribute(
	"src",
	"https://documentcloud.adobe.com/view-sdk/viewer.js"
);
plugin.async = true;
doc.head.appendChild(plugin);
},

I like this strategy! Anyway, that they had no drawback creating an AdobeDCView object for his or her PDF. They used a watch on this.adobeApiPDFReady:

watch: {
	adobeApiPDFReady(val) {
		if (val) {
			// val == true ; Adobe is loaded on web page
			this.adobeDCView = new window.AdobeDC.View({
				clientId: "9861538238544ff39d37c6841344b78d",
				divId: "pdfview",
				});
			}
			console.log("Adobe is mounted with Consumer ID");
	},
},

Thus far so good. They then used a button to set off displaying the PDF:

<button @click on="openPDF">Click on to view file</button>
<div id="pdfview"></div>

And here is the strategy:

openPDF() {
	console.log("Attempting to open PDF");
	// Opening preview with default settings from https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/#live-demo
	this.adobeDCView.previewFile(
	{
		content material: {
			location: {
				url:
				"/hamlet.pdf",
			},
		},
		metaData: { fileName: "hamlet.pdf" },
	},
	{}
	);
},

That is all boilerplate per our docs, simply barely modified for Vue, for instance, this.adobeDCView to symbolize Vue’s information. Nevertheless when previewFile was known as, this error was returned:

Truthfully I used to be fully at a loss as to why this error was being thrown. Nothing appeared amiss. I ensured that the div component was being discovered appropriately. I ensured that the library was actually loaded. Nothing made sense.

Then – purely on a whim – I modified adobeDCView from a Vue worth (i.e. within the this scope for the element) to window.adobeDCView. It began working!

I then tried this:

watch: {
	adobeApiPDFReady(val) {
		if (val) {
			// val == true ; Adobe is loaded on web page
			this.adobeDCView = new window.AdobeDC.View({
				clientId: "9861538238544ff39d37c6841344b78d",
				divId: "pdfview",
				});
			}

			window.ray = new window.AdobeDC.View({
				clientId: "9861538238544ff39d37c6841344b78d",
				divId: "pdfview",
				});
			}

			console.log("Adobe is mounted with Consumer ID");
	},
},

And inside my code calling previewFile, did:

console.log("Ray", this.adobeDCView);
console.log("Ray2", window.ray);

And noticed this:

Notice how the Vue object is a Proxy, which is smart – Vue’s information is reactive and all. Truthfully I am unsure why I did not have this subject earlier than, however definitely Vue 3 is a important replace from Vue 2. So, I did not need to use a window object because it felt… mistaken. I did a little bit of looking out and located this StackOverflow reply: Methods to make a template variable non-reactive in Vue which led to a word within the official docs on using Object.freeze().

I actually simply modified this:

watch: {
	adobeApiPDFReady(val) {
		if (val) {
		// val == true ; Adobe is loaded on web page
		this.adobeDCView = Object.freeze(new window.AdobeDC.View({
			clientId: "9861538238544ff39d37c6841344b78d",
			divId: "pdfview",
		}));
		}
		console.log("Adobe is mounted with Consumer ID");
	},
},

And it labored! This is an embedded CodeSandbox exhibiting it in motion:

As all the time, let me know if this does not be just right for you!