Home > database >  How to store and load/display local PDFs with browser-data, from a website
How to store and load/display local PDFs with browser-data, from a website

Time:07-02

I'm working with an extremely old database system containing people and associated PDFs. I can access most data over a webbrowser, however PDFs cannot be requested via web-api - I do however have the liberty of loading any javascript library, and use chrome webdev console.

I want to get a proof of principle working, where I can load a person's PDFs. But I'm not quite sure what the best approach is.

  1. Idea to upload a file to the website's local storage in my browser (since it's viewed several times). However I seem to be lacking a good library to save/load files from the cache directory. This library wasn't updated since 2016 and Filesaver.js doens't seem to be keen on loading the files after saving. Using a fully-fledged database implementation seems overkill (most files will be <= 5-10MB)
  2. Loading a file from local storage (even if dir is added to workspace in chrome) seems completely impossible, that would've been an alternative
  3. adding the local file path to a <a href=""> element did not work in chrome

Is there a feasible approach to manage/associate PDF files on my local drive with the website I'm working with (and have full client-side control, i.e. can load any library)?

Note: Access is restricted, no chrome addons can be used and chrome cannot be started using custom flags

CodePudding user response:

I don't exactly know what you are asking for, but this code will get all the pdfs in a selected directory and display them and also makes a list of all the file objects. This will only work in a "secure context" and on chrome

(it also wont run in a sandbox like a stackoverflow code snippet)

js

let files = [];
async function r() {
  for await (const [_, h] of (await window.showDirectoryPicker()).entries()) files.push(await h.getFile());
  files = files.filter(f => f.type === "application/pdf");
  for (const f of files) {
    let e = document.createElement("embed");
    e.src = URL.createObjectURL(f), e.type = f.type;
    document.body.appendChild(e);
  }
}

html

<button onclick="r()">read PDFs</button>

also you can probably use this if you need to send the local PDF somewhere

not sure this answers the question but i hope it helps

CodePudding user response:

Since ActiveX controls are no longer available browsers can display a PDF or a user can download the pdf.

For any more control over that I suspect you could try render the pdf using a JavaScript library like https://mozilla.github.io/pdf.js/

For full control you wont be in a position to control the PDF version, you could alternatively render the PDFs to images on the server and display image versions of the pages.

  • Related