【React】- 跨域PDF预览、下载（改文件名）、打印

我们经常会碰到跨域来方位PDF，同时需要下载、打印的需求，通常由于浏览器的安全策略，可以预览，但是下载和打印可能会受限，这时候怎么办呢？

1.创建一个隐藏的标签

要下载 iframe 中的 PDF 文件，你可以通过以下步骤实现：

1. 获取 PDF 文件的 URL：确保你已经有一个指向 PDF 文件的 URL，即 url。
2. 创建一个下载链接：使用 JavaScript 创建一个隐藏的下载链接，并触发点击事件来下载文件。

以下是一个示例代码：

// 假设 url是你已经定义的 PDF 文件 URL
const downloadPdf = () => {const link = document.createElement('a');link.href = url;link.download = 'document.pdf'; // 你可以根据需要更改文件名document.body.appendChild(link);link.click();document.body.removeChild(link);
};// 在你的组件中添加一个按钮来触发下载
<button onClick={downloadPdf}>下载 PDF</button>

将上述代码集成到你的 index.jsx 文件中，确保 slnPdfUrl 是有效的 PDF 文件 URL。用户点击按钮时，PDF 文件将被下载。

示例集成

假设你的 index.jsx 文件如下：

import React from 'react';const YourComponent = ({ slnPdfUrl }) => {const downloadPdf = () => {const link = document.createElement('a');link.href = slnPdfUrl;link.download = 'document.pdf';document.body.appendChild(link);link.click();document.body.removeChild(link);};return (<div><iframe className='sln-detail-pdf'src={slnPdfUrl}width="100%" height="100%"/><button onClick={downloadPdf}>下载 PDF</button></div>);
};export default YourComponent;

但是呢，有些浏览器会直接打开一个新窗口显示pdf，并没有下载PDF

2. Fetch方式

上面的问题通常是由于以下几个原因造成的：

1. 浏览器行为：

   • 某些浏览器可能不会自动下载文件，而是会在新标签页中打开文件。这取决于浏览器的设置和文件类型。

2. 文件 URL 的问题：

   • 确保 url 是一个有效的 URL，并且指向一个可以直接下载的文件资源。

3. CORS 问题：

   • 如果 url 是一个跨域的 URL，浏览器可能会阻止下载操作，除非服务器正确设置了 CORS 头。

4. 文件 MIME 类型：

   • 确保服务器返回的文件具有正确的 MIME 类型（例如，PDF 文件应为 application/pdf），以确保浏览器能够正确处理下载。

解决方法

1. 检查文件 URL

确保 url 是一个有效的 URL，并且指向一个可以直接下载的文件资源。你可以在浏览器中直接访问该 URL，看看是否能正常下载文件。

2. 检查 CORS 设置

如果 url 是一个跨域的 URL，确保服务器设置了正确的 CORS 头。例如，服务器应该返回以下头信息：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

3. 检查文件 MIME 类型

确保服务器返回的文件具有正确的 MIME 类型。例如，对于 PDF 文件，服务器应该返回 Content-Type: application/pdf。

4. 使用 fetch 或 axios 下载文件

如果上述方法都不奏效，可以尝试使用 fetch 或 axios 来下载文件。以下是一个使用 fetch 的示例：

const slnDownload = async () => {if (!url) {message.error('PDF URL 无效');return;}try {const response = await fetch(url);if (!response.ok) {throw new Error('网络响应不正确');}const blob = await response.blob();const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'document.pdf';document.body.appendChild(a);a.click();a.remove();window.URL.revokeObjectURL(url);} catch (error) {message.error('下载文件时出错: ' + error.message);}
};

示例代码解释

1. 检查 URL：

   • 确保 url 存在且有效。

2. 使用 fetch 获取文件：

   • 使用 fetch 发送请求以获取文件的二进制数据（blob）。

3. 创建下载链接：

   • 创建一个临时的 URL 对象（URL.createObjectURL）。
   • 创建一个隐藏的 <a> 标签，并设置其 href 和 download 属性。
   • 触发点击事件以开始下载。
   • 移除临时的 <a> 标签并释放 URL 对象。

3.组件化

笔者直接提供一个react的PDF组件，可以直接复制到自己工程里使用。

工程结构

index.jsx代码

import React, { useRef, useEffect, useState } from 'react';
import { Button,  message} from "antd";
import './index.less';
export default function RPdf(props, ref) {const [url, setUrl] = useState('');const iframeRef = useRef(null);useEffect(() => {init();}, [props.src,props.download])const init = async() => {if (!props.src) {return;}try {const pdfResponse = await fetch(props.src);if (!pdfResponse.ok) {throw new Error('网络响应不正确');}const blob = await pdfResponse.blob();const url = window.URL.createObjectURL(blob);setUrl(url);} catch (error) {message.error('加载 PDF 时出错: ' + error.message);}}const downloadPdf = async() => {if (!url) {message.error('PDF URL 无效');return;}try {const a = document.createElement('a');a.href = url;a.download = props.download;document.body.appendChild(a);a.click();a.remove();window.URL.revokeObjectURL(url);} catch (error) {message.error('下载文件时出错: ' + error.message);}}const printPdf = () => {if (!url) {message.error('PDF URL 无效');return;}const iframe = iframeRef.current;if (!iframe) {message.error('无法找到 iframe');return;}iframe.contentWindow.focus();iframe.contentWindow.print();}return (<div className='r-pdf-container'><div className='r-pdf-header'><Button onClick={downloadPdf}>下载</Button><Button onClick={printPdf}>打印</Button></div><div className="r-pdf-content"><iframe className='r-pdf'ref={iframeRef}src={url}width="100%" height="100%"/></div></div>)
}

index.less代码

.r-pdf-container {width: 100%;height: 100%;display: flex;flex-direction: column;gap: 6px;margin: 12px;.r-pdf-header {height: 40px;display: flex;justify-content: flex-end;gap: 8px;}.r-pdf-content {width: 100%;height: 100%;// overflow: auto;.r-pdf {border: 0px;}}
}

使用

<RPdf src={url} download={yourDownloadName+'.pdf'} />