K
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 IDnew_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 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>
H
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 renderedH
Hans Peter
Awesome, answered the first question on my own. just use an HTML statement for the link and leave the text blank
<a href="/document.pdf"></a>
R
Ramasubramanian Meenakshisundaram
Hans Peter
I tried the below updated code and it worked for all the pdf links on the page.
<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 IDnew_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
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 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
planned
Nicolas Giard
D
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.