how to set a pdf file so that it can display?

Question

how to set a pdf file so that it can display?

Dicky1 opened this issue 4 years ago · 14 comments

Dicky1 commented 4 years ago

I tried the inspect element on the Hugo blog page, an error appeared like the picture

{{< embed-pdf url="./path/to/pdf/file/LAPORAN HASIL MONITORING KEAMANAN SIBER TAHUN 2020.pdf" >}}

is it correct to set the url?

Answer 1 · 2021-03-05T17:05:13.000Z

Dicky1 commented 4 years ago

Answer 2 · 2021-03-05T17:15:51.000Z

@Dicky1 have you followed the steps to setup the short code correctly?
Is this on your local machine or a VM?
From the error it seems that the PdfJsLib is blocked.

Answer 3 · 2021-03-05T17:22:18.000Z

@Dicky1
After you have setup the shortcode correctly you have to place the pdf file in the content folder where the document exists and specify the relative path to that folder.
For ex:
if your hugo site is in a folder called blog-hugo this would be an example code.
This would be a sample document /blog-hugo/content/demo-page/index.md
Your pdf file should be in the same folder as follows:
/blog-hugo/content/demo-page/LAPORAN HASIL MONITORING KEAMANAN SIBER TAHUN 2020.pdf

and in the index.md file you should use the shortcode as follows:

{{< embed-pdf url="./LAPORAN HASIL MONITORING KEAMANAN SIBER TAHUN 2020.pdf" >}}

Answer 4 · 2021-03-05T17:26:24.000Z

Another suggestion: avoid having spaces in the file name of the PDF file. You can use - or _ like
LAPORAN_HASIL_MONITORING_KEAMANAN_SIBER_TAHUN_2020.pdf

Answer 5 · 2021-03-05T19:21:36.000Z

still the same pdf file does not appear

Answer 6 · 2021-03-06T09:41:21.000Z

Have you copied the pdf-js files as per step 3 in the setup here?

Answer 7 · 2021-03-06T09:49:05.000Z

Already, is it possible that my pdf file is too big?

Answer 8 · 2021-03-06T10:11:45.000Z

Already, is it possible that my pdf file is too big?

What is the size of the file?
I do not think the error that you are seeing is because of that.
is it possible to push your code and share the repository with me?
I can test it locally and check if there is something that needs to be fixed.

Answer 9 · 2021-03-08T01:50:44.000Z

Github

that's my repository for this problem

Answer 10 · 2021-03-08T05:03:19.000Z

@Dicky1 Got it. I pulled your repository.
One thing that needs to be fixed in your repository is in the JS folder here https://github.com/Dicky1/hugo-blog/tree/main/static/js

The build, web folders and LICENSE should be inside a folder called pdf-js.
You can take a look at the demo here

Your pdf file is OK.
I checked it on my local dev env. The filename without spaces is not a problem.

Answer 11 · 2021-03-08T05:27:18.000Z

I've moved the file in the pdf-js folder I think it's still the same

may check my latest repository

blog-hugo

Answer 12 · 2021-03-08T05:37:32.000Z

I figured it out.
The PDF file is inside the /post folder.

This is the folder structure.

Move the PDF file under /post folder.
{{< embed-pdf url="./post/LAPORAN HASIL MONITORING KEAMANAN SIBER TAHUN 2020.pdf" >}}

if you want to maintain all resources under one folder then you can create a file/ folder under the post folder.

Answer 13 · 2021-03-08T05:44:59.000Z

oke solved thanks

Answer 14 · 2021-03-08T05:47:22.000Z

Closing since the issue was resolved.