Is there a way to showcase a PDF file using pdftron through npm?

  1. pdftron/webviewer has been successfully installed

     "dependencies": {
     "@pdftron/webviewer": "^7.3.0",
     "body-parser": "^1.19.0",
     "express": "^4.17.1",
     "mongoose": "^5.9.7",
     "nodemon": "^2.0.2",
     "pug": "^2.0.4"
 }

  2. The static files for Webviewer have been transferred to the public folder

  3. The JavaScript in index.html script is attempting to load a pdf file

    Welcome to webviewer import WebViewer from '@/webviewer' 
         WebViewer({
         path: '/webviewer',
         initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
     }, 
     document.getElementById('viewer')).then(instance => {})    
  </script>

  4. The pdf file is not displaying, why might this be happening?

javascriptpdfnpmclient-sidepdftron

Answer №1

Thank you for providing the link to your repository.

After reviewing this resource:

We recommend trying the following steps:

  1. Copy and paste webviewer.min.js from the pdftron webviewer node module to /public/webviewer directory

  2. In your custom.js file, remove the line that imports from webviewer

  3. In your index.html file, insert this script tag before calling your custom.js file: 

    <script src='./webviewer/webviewer.min.js'></script>

Note: I observed a 404 error in the network tab when loading your application, indicating a potential issue with the library setup.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why isn't my file being recognized post-multer middleware?

I am currently facing an issue with uploading a filename and a post (similar to 9GAG style) to my MySQL database, and storing the file in my project folder. The front end is able to retrieve the file without any problems (verified through console.log), but ...

javascriptnode.jsvue.jsmulter

How does the call method on array.prototype.includes work with arguments x and y?

Curious about the functionality of array.prototype.includes.call(x, y);. Discovered that includes() confirms if an array has the specified value and provides a true or false result. Learned that call() invokes this alongside any optional arguments. The ...

javascripttypescript

MUI-Datatable rows that can be expanded

I'm attempting to implement nested tables where each row in the main table expands to display a sub-table with specific data when clicked. I've been following the official documentation, but so far without success. Below is a code snippet that I& ...

javascriptreactjsmaterial-uimui-datatable

Tips for altering the appearance of a button:

Upon clicking the subscribe button and successfully subscribing, I want to display an unsubscribe option in my code. To achieve this, I have created two separate divs for each button, thinking that we could toggle between them. <div id ="subscribe_ever ...

javascriptjqueryhtmlcss

Incorporating a YouTube or Vimeo video while maintaining the proper aspect ratio

On my video page, I embed Vimeo videos dynamically with only the video ID. This causes issues with the aspect ratio as black bars appear on the sides due to the lack of width and height settings. The dynamic video ID is implemented like this: <iframe ...

javascripthtmlcssvideoyoutube

Transforming HTML into PDF files with PHP, not the other way around

As a PHP developer, I have a project that requires converting a set of HTML documents (approximately 30 to 50 pages) into PDF files. After conducting some research, I have found several potential solutions. These include various PHP libraries and command ...

phphtmlpdfpdf-generation

Optimal techniques for leveraging CSS within Mui and Reactjs

Just starting out with mui, I'm currently working on styling CSS for mui components like so <Typography variant="h5" sx={{ fontWeight: "bold", color: "#1a759f", display: "flex", ...

javascripthtmlcssreactjsmaterial-ui

What is the process for converting plain text into an image tag using the methods ".replace()" and ".html()"?

My goal is to customize this particular answer so that it can transform classic BCCode [img]{url}[/img] into an HTML image. In the code snippet provided, I have successfully implemented something similar with [b]text[/b]. However, when attempting to use [i ...

javascriptjqueryhtmlregexreplace

Setting up node packages for global use without an internet connection

Setting: Operating within a secure, offline system. Inquiry: I am currently transferring node_modules manually and have come across one that requires global installation. Can you provide guidance on how to proceed with this task? ...

node.jsnpm

Find the location in a node.js script where a promise was rejected

Recently, I encountered a code snippet from an npm package that has been causing me some trouble. The issue is that I'm having difficulty in pinpointing where the rejected promise is being created or rejected within node.js. const someHiddenEvil = fu ...

javascriptnode.js

Are variables initialized before the execution of ajax?

After reviewing the code snippet provided below, can we confirm with certainty that the id variable passed in the ajax call will consistently be assigned a value of 1? Or is there a possibility that the id could potentially be null or undefined at some p ...

javascriptjqueryajax

What are some strategies I can implement to effectively manage different errors and ensure the app does not crash

I came across a variety of solutions for error handling. The key concept revolves around this explanation: https://angular.io/api/core/ErrorHandler Attempts were made to implement it in order to capture TypeError, however, the outcome was not successful: ...

javascriptangular

When node.js v6.11.2 is installed on Windows 7, it does not include the correct npm version

When trying to install node.js v6.11.2 on my Windows 7 computer, I am encountering an issue where it is installing the incorrect version of npm alongside it. Even after downloading the installer directly from node.js' website which claims that 6.11.2 ...

javascriptnode.jsnpmfailed-installation

What is the best way to spin an element around its center?

I'm faced with a challenge where I have an element that needs to be rotated using JavaScript. The rotation is currently functional, but it's rotating around points other than its center. My goal is to rotate the element around its own center. ...

javascriptjqueryhtmlcss

Unable to move cursor in contenteditable section

I am currently working on developing a rich text editor in React, but I have encountered an issue that has me stuck. The problem I am facing is that as I type each character, the insertion point does not update accordingly, causing the cursor to remain stu ...

javascripthtmlcssreactjs

The issue with Ajax.BeginForm OnSuccess is that it prevents the CSS transition from functioning properly

Apologies if the title is unclear. In my design, I aim to implement a transition effect when the left or right buttons are clicked. However, the transition does not function as expected because the OnSuccess callback seems to occur before the page is rend ...

javascriptcssajaxasp.net-mvc

Discover a method to retrieve all recommended strings based on a search query using JavaScript

I have two strings: one containing all the values of countries and the second string that I entered when searching for a country. Now, I am looking to retrieve all results that contain "In", such as India and Indonesia. For example, if I search for "IN" ...

javascriptreactjs

Activate audio and trigger notification

I'm looking to incorporate a small beep sound into my web application before displaying an alert message. Here's what I currently have: if(_none_valid) { $.playSound('/static/wav/beep_error.wav').delay(300); alert('ERROR: ...

javascriptjqueryjquery-plugins

Highcharts integration with YQL finance data in JSON format

Currently, I am utilizing jQuery and highcharts.js to develop a single line chart on my website that displays historical financial data for any company specified by the user. I have been experimenting with YQL and employed this query to fetch some quotes i ...

javascriptajaxjsonhighchartsyql

Managing responses from ajax requests that can handle both text and json formats

After submitting a form via Ajax and receiving a response from the servlet in either text or JSON format, I'm wondering if there is a way to handle both types of responses. I've read through the jQuery/Ajax documentation, but the JQuery Ajax page ...

javascriptjqueryajax