RapiPdf: Generate PDF button on a local json file does nothing

When I click the Generate PDF button:

Screenshot from 2020-04-01 16-27-42

nothing happens. My issue is not the same as described in https://github.com/mrin9/RapiPdf/issues/5, in that issue the user describes a tab opening for a second and then closing, in my case nothing happens. Also the demo website https://mrin9.github.io/RapiPdf/ works great with the Swagger pet store example link https://mrin9.github.io/RapiPdf/specs/petstore.json.

Here is what I have done so far:

Clone RapiPdf to my home directory:

cd ~
git clone https://github.com/mrin9/RapiPdf.git

Based on the bottom of the readme I’m doing to build steps:

cd ~/RapiPdf
yarn install
yarn build
yarn serve

In the root directory of RapiPdf there is already a file named index.html, so I made a file index2.html:

cd ~/RapiPdf
touch index2.html

Then I copy/pasted in this text from the RapiPdf website:

<!doctype html>
  <html>
  <head>
    <script src="https://unpkg.com/rapipdf/dist/rapipdf-min.js"></script>
  </head>
  <body>
    <rapi-pdf
      style = "width:700px; height:40px; font-size:18px;" 
      spec-url = "https://mrin9.github.io/RapiPdf/examples/specs/petstore.json"
      button-bg = "#b44646" 
    > </rapi-pdf>
  </body> 
  </html>

Then I copied a file named MyApi.json into the ~/RapiPdf directory. This file contains the Swagger 2.0 pet store example so I’m 100% sure it’s valid.

Next I edited the spec-url = "https://mrin9.github.io/RapiPdf/examples/specs/petstore.json" line in index2.html to be: spec-url = "../MyApi.json"

Please note that MyApi.json and index2.html are both located in the ~/RapiPdf/ directory. Next I double-clicked index2.html to open it in Chrome, see the screenshot at the beginning of this post. If I press the Generate PDF button nothing happens. No error message, no pop-up blocker warning, no momentary tab opening and then closing.

I’ve tried it with and without the yarn serve command above running. In the text box I’ve tried:

../MyApi.json
/home/cdahms/RapiPdf/MyApi.json
file://home/cdahms/RapiPdf/MyApi.json
file:///home/cdahms/RapiPdf/MyApi.json

In Chrome I went to: Chrome -> dot dot dot button -> Settings -> Privacy and security -> Pop-ups and redirects and added file:///home/cdahms/RapiPdf/index2.html

I also tried opening index2.html in FireFox, same result.

Suggestions ??

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (3 by maintainers)

Most upvoted comments

I can see there are about 12 errors in the screenshot, but not sure what are they. However I think its because we are trying to load a local file instead of loading from a http server. (There are some know issues when we try to load the spec file from a local system instead of an http server)

can you try to expose the folder ~/temp that you created through a web-server For a quick test I normally use http-server

in the command line, from the ~/temp folder run the below command

npx http-server

and navigate to localhost:8080 in your browser

let me know if it worked

PS: Can you also tell me which OS are you using ?

mrin9 on Apr 5, 2020

yes they both have. However there is a bug though, the JSON cannot contain $refs in it

RapiPDF: generatePdf(spec) https://mrin9.github.io/RapiPdf/api.html#methods RapiDoc : loadSpec https://mrin9.github.io/RapiDoc/api.html#methods

mrin9 on Apr 2, 2020

few things I would like to set right

You dont need to do git clone or any of the build steps. Thats for those who would like to modify the functionality of RapiPDF. You are just using it

So, I would say try the following, create a new folder and place two files in it

index.html
MyApi.json (OpenAPI spec)

index.html

<!doctype html>
<html>
  <head>
    <script src="https://unpkg.com/rapipdf/dist/rapipdf-min.js"></script>
  </head>
  <body>
    <rapi-pdf spec-url = "./MyApi.json"> </rapi-pdf>
  </body> 
</html>

To test and debug if things are working , open index.html in your browser. You should also open browser console (Dev Tools) in your browser. When your click Generate PDF it will try to load MyApi.json and will be shown in the Network section in browser console, if not then there is some issue with the file path

Let me know if that works

mrin9 on Apr 2, 2020