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>
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>
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.