dendron icon indicating copy to clipboard operation
dendron copied to clipboard

Make it possible to embed and preview PDFs

Open SR-- opened this issue 2 years ago • 4 comments

Please select if your request is either something new or an enhancement

  • [ ] Enhancement of an existing Feature.
  • [x] Request of a new feature.

Please select the area your request applies to. (Multiple selections are Possible. You can leave blank if you're not sure.)

  • [ ] Workspace - VSCode workspace, vaults, Intellisense/autocomplete, Dendron settings
  • [ ] Lookup - Dendron's Lookup Command
  • [x] Views - Dendron Preview, Tree View, Side Panels in the UI
  • [ ] Schema - Dendron Schemas
  • [ ] Pod - Data import from / export to Dendron
  • [x] Publish - External Site Publish
  • [ ] Markdown - Markdown features, such as syntax support and features

Is your feature request related to a problem? Please describe

It does not seem possible to embed and display PDF documents in Dendron Preview (and in Publishing?)

Describe the solution you'd like

A simple way to embed PDf documents, similar to how one does that with images.

Describe alternatives you've considered

embed, iframe do not seem to work.

If there is a solution, please add to the documentation on the Wiki.

Additional context

Articles, maps, instructions often exist as PDFs online or on the local drive. There should be no need to convert them into images to embed them to enhance visual recall or to provide them inline with the rest of the note content.

SR-- avatar Dec 27 '21 05:12 SR--

Thanks @SR-- - as you suggested, this is not currently possible. We can add this feature request to the backlog.

jonathanyeung avatar Dec 28 '21 15:12 jonathanyeung

For tracking purposes, and connecting potentially related items:

  • Discussion of interest: https://github.com/dendronhq/dendron/discussions/1975
  • Another issue that may be of interest: https://github.com/dendronhq/dendron/issues/1450

ScriptAutomate avatar Dec 29 '21 19:12 ScriptAutomate

to add to this conversation, i added the extension

image

but when i open pdf's from a dendron [[link.pdf]] i get the raw text view of the file:

image

When i open the file from the normal VSCode file explorer:

image

would expect that clicking the dendron link at least allows the extension to take over until something can be done natively with dendron to allow the previewer pane to show the pdf's

tallguyjenks avatar Jan 05 '22 18:01 tallguyjenks

As an update to this issue:

  • Right now, embed and iframe HTML in Markdown will work with published sites
    • This will not work in Toggle Preview / Markdown Preview of Dendron notes

This is because of updates to Dendron's published site functionality it looks like.

Dendron doesn't have a built-in way to do this still (as in, not a Dendronified syntax way), but you can put raw HTML in markdown. Could try these:

  • iframe: https://www.w3docs.com/snippets/html/how-to-embed-pdf-in-html.html
  • or embed: https://www.w3docs.com/learn-html/html-embed-tag.html

I tested this, and it won't render the embedded PDF in the Dendron toggle preview or Markdown preview but it will embed and appear in the published site contents.

  • Add pdf to notes/assets/*
  • Reference in your note like this:
<iframe src="/assets/pdf-example.pdf" width="100%" height="500px"></iframe>

Embed example instead of iframe:

<embed type="application/pdf" src="/assets/pdf-example.pdf" width="100%" height="500px" title="Example PDF">

Alternately, if wanting it to not appear with PDF settings/buttons for things like downloading, can embed with #toolbar=0 appended to end of PDF link (depending on browser, may or may not work differently - Chromium for me seemed to recognize that it should render differently for me, but not Firefox):

<iframe src="/assets/pdf-example.pdf#toolbar=0" width="100%" height="500px"></iframe>

I believe src can also be a url to a PDF hosted elsewhere, in case not in local vault, too

ScriptAutomate avatar Aug 03 '22 21:08 ScriptAutomate

As another update to this issue, in case it is helpful for others:

You can permalink to a specific page in a PDF, with the #page=8 syntax, ex. https://www.ethicalads.io/prospectus/ethicalads-advertiser-prospectus.pdf#page=8 - this could mean that if you are publishing a site with Dendron that includes a PDF that gets linked to, you could link to specific pages.

ScriptAutomate avatar Dec 21 '22 17:12 ScriptAutomate