It’s pretty easy to embed a PDF file into your website, but this might give your users more access than you would like.

将PDF文件嵌入到您的网站中非常容易，但这可能会使您的用户获得比您想要的更多的访问权限。

Maybe you want to show your book on your website, but you don’t want users to download it because it’ll decrease your ad revenue. Maybe you want to show a document to members of your site, but you don’t want them to share it with non-members.

也许您想在您的网站上展示您的书，但您不希望用户下载该书，因为这会减少您的广告收入。 也许您想向您的站点成员显示文档，但是您不希望他们与非成员共享。

Whatever your reasons are, this tutorial will show you how to prevent PDF downloads in your React app.

无论您是出于何种原因，本教程将向您展示如何防止在React应用程序中下载PDF。

用户可以通过各种方式下载PDF (Every Way a User Can Download PDFs)

Before solving any problem, we need to better define what the problem is.

解决任何问题之前，我们需要更好地定义问题所在。

用户可以通过三种主要方式下载PDF (There are three main ways that users can download PDFs)

1. Click the download button on your browser’s PDF viewer.
   单击浏览器的PDF查看器上的下载按钮。
2. Right-click the PDF and select “Save As.”
   右键单击PDF，然后选择“另存为”。
3. Print the web page and select “Save as PDF.”
   打印网页，然后选择“另存为PDF”。

We’ll explore solutions to all of these methods!

我们将探索所有这些方法的解决方案！

局限性 (Limitations)

I want to be upfront with the limitations of this tutorial. Since the information on your website is on the public web, there will always be some way for a user to potentially retrieve or recreate the PDF through data on your site. This tutorial simply prevents the “normal user” from downloading your PDFs — not an “expert user” or developer. This tutorial also does not prevent screenshots since that’s under the control of the OS and cannot be influenced by code running in the browser.

我想提前了解本教程的限制。 由于您网站上的信息在公共网络上，因此用户总是可以通过某种方式通过您网站上的数据来检索或重新创建PDF。 本教程只是防止“普通用户”下载PDF，而不是“专家用户”或开发人员。 本教程也不会阻止屏幕截图，因为该屏幕截图受操作系统控制，并且不受浏览器中运行的代码的影响。

Now that we have the technicalities out of the way, let’s get started!

现在我们已经掌握了技术知识，让我们开始吧！

卸下下载按钮 (Removing the Download Button)

The simplest way to embed a PDF on a website is to use the <embed> tag:

在网站上嵌入PDF的最简单方法是使用<embed>标签：

import React from "react";
import PDF from "./document.pdf";const App = () => (<embedsrc={PDF}type="application/pdf"height={800}width={500}/>
);export default App;

However, this uses the browser’s built-in PDF viewer, which usually gives users the option to download:

但是，这使用了浏览器的内置PDF查看器，通常使用户可以选择下载：