How to dynamically serve a pdf file sent by API in VueJS?

Question

I would like to serve a file sent by my API in my VueJS client. More specifically, when going on a given URL, a file (pdf, text or image) should open up if the browsers support it (like how Chrome opens PDFs for example). I would like to do it with VueJS or in pure HTML/CSS/JS.

I have an express API working, and going on the file's URL in the API opens it. It uses Express' sendfile method directly. Now, i want to mimic this behavior inside my client, without redirecting the user to my API: I want him to stay on the same domain.

Here is my API:

const express = require('express')

const router = express.Router()
router.get('/files/*', (req, res) => res.status(200).sendFile('C://mockfile.pdf'));
module.exports = router;

Going anywhere on localhost:3000/files/ opens the file inside the browser. But now I want the same behavior for my client, without redirecting the user at localhost:3000 (the VueJS app runs on localhost:8080).

For example, going on localhost:8080/mockfile.pdf would open the file directly inside the browser. I can use any library if needed (I already use axios).

How can I achieve this?

https://www.alexhadik.com/blog/2016/7/7/l8ztp8kr5lbctf5qns4l8t3646npqh — connexo, Oct 11 '18 at 18:00
The responses to the StackOverflow question & to the blog only forces the content to be downloaded. The header is already correct since my API URL opens the file. I just want to "embed" the page inside my client. — TheMrZZ, Oct 11 '18 at 18:54
Surely you can use [this answer](https://stackoverflow.com/a/27563953/283366) as a base but instead of creating an `` tag, you can just use `location.href = window.URL.createObjectURL(blob)` — Phil, Oct 12 '18 at 04:48
The question is tagged with vue.js, so I am assuming that it's vuejs related. The title also kind of gives it away... — Edwin Krause, Oct 13 '18 at 04:27
This question is totally VueJS specific, i failed to precise it inside the post sorry. So yes, i would like to do it with VueJS or with pure HTML/CSS/JS. — TheMrZZ, Oct 13 '18 at 15:44
It seems my comment has been removed, probably because I did not clarify... the things this question is asking about have nothing to do with Vue. From their site _"The core library is focused on the view layer only"_. Displaying a PDF in your browser will have very little to do with Vue — Phil, Oct 15 '18 at 05:37
@TheMrZZ Did you try the package mentioned in my answer from below? Did it do what you were looking for? — Edwin Krause, Oct 15 '18 at 12:12
I tried the package below. It does render the pdf, but it's rendering it by itself, without using the built-in pdf viewer. — TheMrZZ, Oct 15 '18 at 14:02

Edwin Krause · Answer 1 · 2018-10-12T07:01:01.650

0

I believe this package is what you're looking for vue-pdf which can be downloaded and istalled with npm.

then use it in your template like this:

<pdf src="http://localhost:3000/files/mockfile.pdf" @num-pages="pageCount = $event" @page-loaded="currentPage = $event"></pdf>

See linked documentation for furthur details on how to handle events on the document.

edited Oct 12 '18 at 07:01

answered Oct 12 '18 at 04:43

Edwin Krause

1,766
1
16
33

I tried using this package. It does render the pdf by itself, but it does not use the pdf viewer built inside browsers. My API use Express' sendfile method, and this renders the pdf inside the browser directly. I just want a way to use this response in another URL. – TheMrZZ Oct 15 '18 at 14:04

How to dynamically serve a pdf file sent by API in VueJS?

1 Answers1