How to download a site as a pdf-file?

Community resources General
1

Hi

I want to download a pricelist from a collectionlist as a pdf-file.
I tried to do it with jsPDF but I get some Errors like:
jspdf.debug.js:11878 Access to XMLHttpRequest at 'https://uploads-ssl.webflow.com/5cc34f99b620bc317c9f4862/5cc472a6b2ea2ef0f030d2d2_baseline-picture_as_pdf-24px.svg' from origin 'https://my-easy-test-project.webflow.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What’s the best way to export a dynamic site as a PDF-File?

Here is my testing-area (the custom code is nested in the “pricelist”-site):
https://preview.webflow.com/preview/my-easy-test-project?utm_source=my-easy-test-project&preview=274180e54ee5b62dca007a402e721263

Kind regards
Alain

2

Is my question to stupid or the answer to hard?
Would be great if somebody could guide me to the right direction.

Thanks in advanced.

3

Hi Alain, you can use GoFullPage - Full Page Screen Capture - Chrome Web Store

1 Like
4

Hi BrandNew

Thanks for answering.
It’s not what I’m looking for.

I wanna put a PDF-Downloadlink where users can download the current pricelist.
The pricelist takes its data from a collection which daily updates.
I thought I could make a HTML-Site for that pricelist.
But how can I convert that HTML-Site into a PDF-File by the click of a button within the Website?

5

not sure if this is what you meant: upload the pdf as a normal image and paste the link of the file.

6

Hi Alain,

Have you tried adding CSS print media styles to the pricelist collection pages? I checked your link and there are none on the relevant pages.

You can then add a button with: Window print() Method method or similar. Which will launch a print window and the user can then save to PDF, it will most likely render differently on different browsers.

There are options to generate PDF’s from html pages but the licences are not cheap and require a fair amount of CPU resources on the web server (just like it does on a desktop/laptop).

Best wishes,
Sam

7

Does this not just capture content as an image file? Rather than a proper PDF i.e. text is text SVG are still vectors and images are as placed in the DOM?

8

Yes, its just generates an image bitmapped pdf. I would just upload a “proper” pdf and link that to a button

9

Hi Sam_Sharpe,
this is an interesting approach, because in fact, downloading a PDF is nothing else than getting something that you can print.
Do you think it’s possible to style header and footer of it? Or does it add the url and the page title by default?

Best regards,
Alain

10

Hi Alain,
You can remove the automatic placement of URL and header by setting page margins to 0, and then add your own header/footer divs and style them as you would like.
Kind regards,
Sam

11

Hi BrandNew,
I think Alain wants to use information from the CMS to generate printable files and this information needs daily updating so I guess he is keen to avoid manual creation of PDF’s and changing the relevant links each time this occurs?
Kind regards,
Sam

12

Hi Sam
Thanks for the tip.

My pricelist sometimes is longer than just one page but I wanna not just add a Footer at the end of the Table. I would like to keep the same Footer at the bottom for every page, independently how long the Table is.
Is this possible?

Edit:
Just found the solution :slight_smile:
https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document

13

Hi Alain,
You’re welcome.
Webflow does not have support for Tables yet, but there’s a wishlist item here that could use your vote! Table Support | Webflow Wishlist
Cheers,
Sam

14

Hi Sam
You mean this can only be solved by using a thead-/tfoot-element within a table-element instead of making a table using divs only?

15

Hi Alain,

This is the latest working draft from W3C:
https://www.w3.org/TR/css-page-3

I have added a Wishlist item here:
https://wishlist.webflow.com/ideas/WEBFLOW-I-2060
Best wishes,
Sam

16

or can you just add a button to the site and put pdf file to asset manager.
Screen Shot 2020-03-04 at 12.47.33 PM

17

Any news on CSS paged media implementation? Would be useful, I guess its held up in w3c still?

18

There are better sources for the status of specifications like this than the forum. Here is one you should bookmark;

19

Meanwhile, oh it’s along time ago :-D, I solved it with jsPDF.
It fullfills my needs.