Streaming live at 10am (PST)

How to download a site as a pdf-file?

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

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.

Hi Alain, you can use https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl?hl=en

1 Like

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?

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

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: https://www.w3schools.com/jsref/met_win_print.asp 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

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?

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

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

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

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

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:

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! https://wishlist.webflow.com/ideas/DESIGNER-I-16
Cheers,
Sam

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?

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

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