I am looking to display a file from my API in my VueJS client. Specifically, when accessing a certain URL, the file (pdf, text, or image) should open if the browser supports it (similar to how Chrome opens PDFs). I want to achieve this using VueJS or just HTML/CSS/JS.
My Express API is set up and clicking on the file's URL in the API opens it. It utilizes Express' sendfile method directly. Now, I aim to replicate this functionality within my client without redirecting the user to the API: I want them to remain on the same domain.
This is my current API:
const express = require('express')
const router = express.Router()
router.get('/files/*', (req, res) => res.status(200).sendFile('C://mockfile.pdf'));
module.exports = router;By accessing any path under localhost:3000/files/, the file opens in the browser. However, I now aim for the same behavior in my client without redirection at localhost:3000 (the VueJS app is running on localhost:8080).
For instance, visiting localhost:8080/mockfile.pdf should display the file directly in the browser. I am open to utilizing libraries if necessary (I am already using axios).
Can you suggest a way to accomplish this?