Is it possible to utilize PDF.js once the PDF file has been downloaded?

Question

Is it possible to utilize PDF.js once the PDF file has been downloaded?

My goal is to integrate PDF.js (or Viewer.js) with a Flask application, where I have already retrieved the file from a server.

Instead of using

PDFJS.getDocument('helloworld.pdf')

I prefer to display the downloaded PDF in the browser through an Ajax call. This approach allows the server to have more control over providing access only to authorized users.

For example, in Flask:

@mayapp.route('/files/<int:file_id>', methods=['GET'])
def file_access(file_id: int=None):
    // Retrieve file path from the database based on user access
    return send_file(file_path)

On the client side:

fetchData: function () {
    axios({
      method: 'get',
      url: '/myapp/files/' + this.file_id,
      dataType: ...,
      headers: ...,
      data: {}
    })
    .then((response) => {
        this.file = response.data
      })
}

Next step is to use PDF.js to view the fetched file:

One way is to utilize a base64 encoded string like demonstrated in Flask / postgres - display pdf with PDFJS:

var doc = PDFJS.getDocument({data: pdfData})

However, I am facing challenges in rendering the document properly. Any suggestions?

javascript pdf vue.js pdf.js

Answer 1

Answer №1

To display a PDF on a webpage, you can loop through its pages and render each page onto a canvas element.

First, create an HTML container where the canvas elements will be added:

<body>
    <div id="pdf-container"></div>
</body>

Then, utilize the functionality of PDF.js by using the .numPages and .getPage() methods like this:

async function renderPDFPage(pdf, pageNumber) {
    const page = await pdf.getPage(pageNumber);
    const scale = 2;
    const viewport = page.getViewport({scale});
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    document.getElementById('pdf-container').appendChild(canvas);
    await page.render({canvasContext: context, viewport});
}

async function renderPDFContent(pdf) {
    for (let i = 1; i <= pdf.numPages; i++) {
        await renderPDFPage(pdf, i);
    }
}

const loadedPdf = PDFJS.getDocument({data: pdfData});
renderPDFContent(loadedPdf);

Answer 2

To display a PDF on a webpage, you can loop through its pages and render each page onto a canvas element.

First, create an HTML container where the canvas elements will be added:

<body>
    <div id="pdf-container"></div>
</body>

Then, utilize the functionality of PDF.js by using the .numPages and .getPage() methods like this:

async function renderPDFPage(pdf, pageNumber) {
    const page = await pdf.getPage(pageNumber);
    const scale = 2;
    const viewport = page.getViewport({scale});
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    document.getElementById('pdf-container').appendChild(canvas);
    await page.render({canvasContext: context, viewport});
}

async function renderPDFContent(pdf) {
    for (let i = 1; i <= pdf.numPages; i++) {
        await renderPDFPage(pdf, i);
    }
}

const loadedPdf = PDFJS.getDocument({data: pdfData});
renderPDFContent(loadedPdf);

Is it possible to utilize PDF.js once the PDF file has been downloaded?

Answer №1

Similar questions

Is it possible to check if something is "ready" by using a combination of setTimeout and recursive functions?

Can you help me convert this Mongoose code to use promises?

Eliminate items/attributes that include a certain term

Exploring the process of passing an array as a function argument from PHP to JavaScript

Eliminate the CSS triggered by a mouse click

Creating a window.variable in a jQuery ajax callback using CoffeeScript

Utilizing reactjs (MERN stack) to dynamically update content on a single page based on both URL parameters and database queries

Encountering a 500 (Internal Server Error) while trying to insert data into the database through ajax

Acquiring JSON-formatted data through the oracledb npm package in conjunction with Node.js

Obtain information using AJAX calls with jQuery Flot

Struggling to properly line up the baselines of navigation list items that are styled as circular elements using CSS

What is more effective: utilizing document fragments or string concatenation for adding HTML to the DOM?

The backbone module is experiencing formatting issues

Clearing the filename in a file type input field using React

The functionality of $(selector).css() seems to be malfunctioning

Issue with API showing return value as a single value instead of an array

Tips for using the deferred method in ajax to enhance the efficiency of data loading from a php script

How to Retrieve the Value from Bulma Datepicker in Vue.js

Exploring the Use of data- Attributes in SVG Circle Elements

Create an overlay effect when hovering in a Vue.js application