I’m having trouble with my website’s PDF preview feature. It uses an embedded Google Docs viewer, but lately some files won’t show up. Here’s what’s weird: it works fine for some PDFs, but others just give a “no preview available” message.
Here’s a sample of how I’m embedding the viewer:
<iframe id="doc-display" src="https://docs.google.com/gview?embedded=true&api_key=EXAMPLE_KEY&url=https://example.com/sample.pdf&embedded=true" frameborder="0" style="width:100%;height:600px;"></iframe>
Anyone know why this might be happening? I’m stumped because it was working great until a couple weeks ago. Now it’s hit or miss. Any ideas on how to fix this or what might be causing the problem would be super helpful!
hey there, ran into this myself recently. google’s viewer can be finicky sometimes. have u tried using a different pdf viewer like pdf.js? it’s been way more reliable for me. also, check if ur pdfs are too big or complex - that can mess things up. might be worth converting them to a simpler format if possible. good luck!
I’ve run into similar issues with Google Docs viewer before. In my experience, it often comes down to PDF compatibility. Some PDFs, especially those with complex layouts or created with older software, just don’t play nice with Google’s viewer.
One workaround I found was to convert problematic PDFs to a more standard format. I use a tool called qpdf to ‘linearize’ the files. It basically restructures the PDF without changing the content. Something like:
qpdf --linearize input.pdf output.pdf
This fixed most of my preview issues. For the really stubborn ones, I ended up switching to PDF.js. It’s more reliable and gives you more control over the viewer.
Also, double-check your server’s CORS settings. I once spent days troubleshooting only to realize it was a cross-origin resource sharing issue blocking the viewer from accessing some files.