Embedding PDF Documents in DataPages

[vidierre]

I would like to embed a PDF into my datapages, then I followed the onliune help available here https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/tech-tip-embed-documents-in-datapages/

But it use gview that is an outdated (since 2015) Google viewer. I tryied also using https://docs.google.com/viewer?url=  but it seems working only on Chrome

Anyone has used a newer method?

[Kurumi]

Hi @vidierre - this code still works: 

<iframe src="https://docs.google.com/viewer?url=[@field:File_Image/]&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

However, you may need to disable the AJAX loading for it to load automatically and for it to show on other browsers.

For reference: https://howto.caspio.com/datapages/ajax-loading/

You can also check this link for other options: https://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html

[vidierre]

On 12/7/2022 at 7:48 PM, Meekeee said:

Hi @vidierre - this code still works: 

<iframe src="https://docs.google.com/viewer?url=[@field:File_Image/]&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

However, you may need to disable the AJAX loading for it to load automatically and for it to show on other browsers.

For reference: https://howto.caspio.com/datapages/ajax-loading/

You can also check this link for other options: https://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html

Hi @Meekeee It doesn't work with tests I did. I used this test datapage, with no extra javascript into the header/footer, where ca_cv is the file field where the PDF file is referenced and HTMLBlock 1 is where I put the embedding code to test preceeding with an H1 title

The first test is with you suggested iframe code:

<iframe src="https://docs.google.com/viewer?url=[@field:ca_cv/]&embedded=true" style="width:600px; height:200px;" frameborder="0"></iframe>

From which I got:

Either with AJAX enabled or disable and either with Chrome or Firefox.

The second test is with the <embed> tag using:

<embed src="[@field:ca_cv/]" type="application/pdf" style="height: 200px; width: 80%"/>

from this I got

it working with Chrome, but from firefox it display blank

The third test is with the <object> tag using:

<object width="80%" height="200" type="application/pdf" data="[@field:ca_cv/]?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">

I got the same results than <embed> tag.

NOTE: if the ca_cv file field references an image file <iframe> tag still doesn't works, but <embed> and <object> works both with Chrome than Firefox.

Is there anyone that embedded PDF files successfully?