Embedded View for PDFs | Voters

Embedded View for PDFs

planned

marafado88

It would be great, to add an embedded way for PDFs.

March 2, 2020

Kilian Wi

Alexander Miller Thanks for the idea. I came accros the problem that I only get the preview for a single link, since you pick from all the elements with class ("is-asset-link") only the first item. 
I added a version which takes all elements and filters them by the .pdf extension. This way you can have multiple pdfs on page with preview
const pdfLinks = Array.from(document.getElementsByClassName('is-asset-link')).filter(link => link.href.includes('.pdf'));
Here is the full script:
<script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
let api_key = "CLIENT ID HERE";
window.addEventListener("load", function() {
// Get all elements with the 'is-asset-link' class (assuming these are the PDF links)
const pdfLinks = Array.from(document.getElementsByClassName('is-asset-link')).filter(link => link.href.includes('.pdf'));
Array.from(pdfLinks).forEach((link_node, index) => {
// Create a new div for each PDF viewer
const new_div = document.createElement("div");
new_div.id = adobe-dc-viewer-${index}
; // Give each div a unique ID
new_div.style = "height: 1150px; width: 100%; margin-bottom: 20px;"; // Adjust height and spacing as needed
link_node.after(new_div);
// Initialize AdobeDC view for each PDF
const adobeDCView = new AdobeDC.View({ clientId: api_key, divId: new_div.id });
// Get the PDF location from the link's href
const pdf_location = link_node.href;
// Check if it's a PDF link before rendering
if (pdf_location.includes('pdf')) {
adobeDCView.previewFile({
content: { location: { url: pdf_location } },
metaData: { fileName: file_${index}.pdf
 } // Give each file a unique name if needed
}, {
embedMode: "SIZED_CONTAINER",
showFullScreen: true,
showDownloadPDF: true
});
}
});
});
</script></script>

Alexander Miller

For those waiting on v3, this can be pasted into the head section in themes. It will automatically place a viewer below any pdf links. You still need to get an API key from adobe at https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/. Based on John Doe's code. 
<script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
let api_key = "[YOUR_API_KEY_HERE]"
window.addEventListener("load", function(){ 
const new_div = document.createElement("div");
new_div.id = "adobe-dc-viewer";
new_div.style = "height: 1150px; width: 100%;";
var link_node = document.getElementsByClassName('is-asset-link')[0];
link_node.after(new_div);
var adobeDCView = new AdobeDC.View({clientId: api_key, divId: "adobe-dc-viewer"});
var pdf_location = link_node.href;
if (pdf_location.includes('pdf')){
adobeDCView.previewFile({
content:{location: {url: pdf_location}},
metaData:{fileName: "a_file.pdf"}
}, {embedMode: "SIZED_CONTAINER", showFullScreen: true, showDownloadPDF: true});
}});
</script>

Hans Peter

Alexander Miller: Thank you very much, worked like a charm. Two questions though 1. how can I hide the link to the document. I use this markdown statement

[Document Name](/document.pdf)

but then a link to the document is placed above the pdf reader 2. how can I embed two pdfs after another. It seems like only the first one is rendered

Hans Peter

Awesome, answered the first question on my own. just use an HTML statement for the link and leave the text blank

Ramasubramanian Meenakshisundaram

Hans Peter
Ref: https://gist.github.com/vinothsubramanian/cb26901915a444009be29b1ed812795e
I tried the below updated code and it worked for all the pdf links on the page.
<script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
let api_key = '[YOUR_API_KEY_HERE]';
window.addEventListener('load', function () {
const linkNodes = document.querySelectorAll('.is-asset-link');
linkNodes.forEach((linkNode, ix) => { // Use ix for index
const new_div = document.createElement('div');
new_div.id = adobe-dc-viewer-${ix}
; // Use ix for unique ID
new_div.style = 'height: 1150px; width: 100%;';
linkNode.after(new_div);
const adobeDCView = new AdobeDC.View({
clientId: api_key,
divId: adobe-dc-viewer-${ix}
, // Use ix for unique ID
});
const pdf_location = linkNode.href;
if (pdf_location.includes('pdf')) {
let fileName = linkNode.text || linkNode.href.split('/').pop();
if (!fileName.endsWith('.pdf')) {
fileName += '.pdf';
}
adobeDCView.previewFile(
{
content: { location: { url: pdf_location } },
metaData: { fileName: fileName },
},
{
embedMode: 'SIZED_CONTAINER',
showFullScreen: true,
showDownloadPDF: true,
}
);
}
});
});
</script>

Yerikyy

Any Updates?

Nicolas Giard

Yerikyy: This is planned for v3. See https://blog.js.wiki/ for updates.

Yerikyy

Nicolas Giard: Ok, thanks. I've also got a solution for v2. after doing some research which embed Adobe official  pdf-embed-api.
See
https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/ for more detail.
Works for me on both HTML and MD editors.
Please note, if there are lots of pictures or video(or large) on page, the DOM is loaded too late, that the addEvenListener function could not find specific DOM. So anyone use this method needs to use window.load function to rewrite Adobe demo code for sure.

John Doe

Yerikyy: Blank page for me..
I first configure the api then copy/paste their code locally in my html page but nothing is displayed
Do I have to enable something in the setting of wikijs ?

John Doe

ok finally works for me:
1- Edit the page -> "Page properties" -> "script", then paste the following code:
<script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
window.addEventListener("load", function(){ 
var adobeDCView = new AdobeDC.View({clientId: "your-api-key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://your_website/path/topdf.pdf"}},
metaData:{fileName: "blabla.pdf"}
}, {embedMode: "SIZED_CONTAINER", showFullScreen: true, showDownloadPDF: true});
});
</script>
2- Return in HTML editor and paste the following code:
<div id="adobe-dc-view" style="height: 1150px; width: 100%;"></div>

Nicolas Giard

marked this post as

planned

Nicolas Giard

Merged in a post:

include a viewer off assets like pdf

joao

include a viewer off assets like pdf or doc

October 27, 2021

Daniel Hollweg

yeah would be great and please a pdf export as remarked before ;-)

Jon

Would this be different than an iframe?

I have PDFs embedded on our wiki using an iframe pointing to the PDF asset.

Joel Roberts

Jon: How did you pull this off? I've been working at this this morning and can't seem to get to work

Bruno Larochelle

Joel Roberts: Greetings.
I don't know if you are still trying to do this, this might help if you have not succeeded yet:
Use the <html> editor, not the visual editor. Maybe Markdown would work also, I did not try.
Insert an <iframe>, with a link to an internal WikiJS pdf asset. You must upload your PDF to the assets of WikiJS—maybe that is the part that you missed from Jon's post.... the PDF asset.
Turn off the Admin > Security > Block iFrame Embedding switch.
Here is an edited example of my <html>:
<p>This is a to use an iFrame to display an WikiJS internal (asset) PDF</p>
<div>
<iframe src="https://blah.blah.your.assets.path/whatever.pdf" width=100% height="600"></iframe>
</div>
Note, however, for me, that this only works with PDFs that are uploaded to the Wiki as assets. It does not work for links to other PDFs (on another site). At least not the ones I tried.
I'm quite happy to find out this works, as now my PDFs are embedded onto the Wiki page.

Yerikyy

Bruno Larochelle: Not work as expected. The pdf file is downloaded automatically in both Chrome and Edge

Bruno Larochelle

Yerikyy: Hi Yerikyy.
Are you sure you are using links to a PDF that was uploaded to WikiJS assets?
I am using WikiJS 2.5.201 and the PDF shows in the embedded iframe, in both Chrome and Edge.

Yerikyy

Bruno Larochelle: Hi, Bruno. Yes, I copy&paste your demo code, and changed the src to my asset link. After finishing editing and exit editor, the pdf file is downloaded automatically. I am using Wiki.js 2.5.268.
I found a new and excellent method to embed pdf with Adobe official api.
See my reply to Nicolas Giard up this page.

Vincent Gerris

Bruno Larochelle: this does not work for me either, the asset is uploaded. Why is there https:// ? Can you give a concrete example that works ? thanks

Bruno Larochelle

Vincent Gerris: Hi. This used
 to work for me, I had numerous PDFs uploaded to my Wiki, and they would show up on the <iframe>. The 'https://' was not necessary, but did not harm either. You could just put the local path and that worked. Now, however, I get the file 'download', so it no longer works for me either. What changed? I don't know.
What is funny is that external PDFs now show up in an <iframe>, and I don't think this worked before. Here is an example of an external PDF, and it shows properly in the <iframe>.
<iframe src="https://www.mapsofworld.com/list-of-countries-in-the-world.pdf" width=800 height=800></iframe>
For now, I'm just putting links to my PDFs. Not as convenient as having it displayed in the Wiki directly, but still workable.
I'm using 2.5.292 on a hosted solution.