如何防止在 iframe src 上自动下载 doc/docx/pdf 文件

Question

I want to build a blurred preview of the document. The document is uploaded to the same domain. The document can be doc/docx/pdf . I tried so many workarounds with iframe , embed , object .

<iframe src="URL" title="Embedded Document" style="width:100%; height:500px; border: none;"></iframe>

<iframe src="URL#toolbar=0" title="Embedded Document" style="width:100%; height:500px; border: none;"></iframe>

<embed src="URL">

<object data="URL"></object>

But nothing achieve my requirement.

TASK: I want to show a preview of the document on the web page which can not be downloadable. Above workarounds, auto-downloads the doc/docx file when I refresh the web page. I want a blurred preview of the document like here: https://essaybatch.com/how-would-you-convene-and-run-your-meetings-if-you-are-based-in-the-united-states/ and the file shouldn't be auto-downloaded.

This requirement is strongly stated by the client, so I can't avoid the feature. You're able to use HTML,CSS,JS,PHP.

Answer 1

Here's how I would implement it:

1. Use a PHP library to take a screenshot of the document and save it as an image. In the iframe source, you should include that image and blur it using CSS. Do not include the link to the actual .doc file because it is a security risk.

2. Add JS listener to page for a cookie that contains a secret value. When cookie is set to that value, page reloads and changes the iframe source to the file location for download.

3. After payment is completed, return a callback with the secret value (token) that sets the cookie via PHP.