实现在线访问OSS中的PDF、图片等文件（OSS不支持在线访问，而是默认下载）

已于 2025-06-25 10:40:35 修改
阅读量249 收藏 1
点赞数 8
CC 4.0 BY-SA版权
文章标签： pdf OSS 在线预览PDF
于 2025-06-25 09:31:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43833540/article/details/148891539

问题分析

当 OSS 返回的响应头中Content-Disposition设置为attachment时，浏览器会强制下载文件。要实现在线预览，需要确保：

  1. 响应头Content-Disposition为inline
  2. 正确设置Content-Type头（如text/html、text/css、application/javascript）
  3. 处理 HTML 中相对路径资源的引用问题

示例代码

// OssProxyController.java (适配OkHttp 3.6且支持PDF代理)
package com.example.demo.controller;

import okhttp3.*;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

@RestController
@RequestMapping("/api/proxy")
public class OssProxyController {

    private final OkHttpClient client = new OkHttpClient();

    // 代理HTML请求
    @GetMapping("/html")
    public void proxyHtml(@RequestParam("url") String ossUrl, 
                          HttpServletResponse response) throws IOException {
        proxyRequest(ossUrl, response, "text/html");
    }

    // 代理CSS请求
    @GetMapping("/css")
    public void proxyCss(@RequestParam("url") String ossUrl, 
                         HttpServletResponse response) throws IOException {
        proxyRequest(ossUrl, response, "text/css");
    }

    // 代理JS请求
    @GetMapping("/js")
    public void proxyJs(@RequestParam("url") String ossUrl, 
                        HttpServletResponse response) throws IOException {
        proxyRequest(ossUrl, response, "application/javascript");
    }

    // 代理PDF请求
    @GetMapping("/pdf")
    public void proxyPdf(@RequestParam("url") String ossUrl, 
                         HttpServletResponse response) throws IOException {
        proxyRequest(ossUrl, response, "application/pdf");
    }

    // 通用代理方法
    private void proxyRequest(String ossUrl, HttpServletResponse response, String contentType) 
            throws IOException {
        Request request = new Request.Builder()
               .url(ossUrl)
               .build();

        Response ossResponse = null;
        InputStream inputStream = null;
        OutputStream outputStream = null;

        try {
            ossResponse = client.newCall(request).execute();
            if (!ossResponse.isSuccessful()) {
                response.sendError(ossResponse.code(), "OSS请求失败");
                return;
            }

            // 设置响应头
            response.setContentType(contentType);
            response.setHeader("Content-Disposition", "inline");

            // 获取响应体流
            ResponseBody body = ossResponse.body();
            if (body!= null) {
                inputStream = body.byteStream();
                outputStream = response.getOutputStream();

                // 复制流内容
                byte[] buffer = new byte[4096];
                int bytesRead;
                while ((bytesRead = inputStream.read(buffer))!= -1) {
                    outputStream.write(buffer, 0, bytesRead);
                }
                outputStream.flush();
            }
        } finally {
            // 手动关闭资源
            if (inputStream!= null) inputStream.close();
            if (outputStream!= null) outputStream.close();
            if (ossResponse!= null) ossResponse.body().close();
        }
    }
}

使用方法

  1. 部署上述代码到你的Spring Boot应用中。
  2. 当你想要预览PDF文件时，通过如下方式请求接口：
GET http://your-server/api/proxy/pdf?url=https://your-bucket.oss-cn-hangzhou.aliyuncs.com/your-pdf-file.pdf

通过这个接口代理请求，会修改响应头，将Content-Disposition设置为inline，使得浏览器尝试在线预览而不是自动下载，同时设置正确的Content-Type（针对PDF为application/pdf），并将从OSS获取到的文件内容流转发给浏览器，实现在线预览的效果。

需要注意的是，对于大的PDF文件，这种简单的流复制方式可能在性能上有一定局限。

示例2：代理 HTML 文件并动态替换其中的资源路径，使其指向正确的代理 URL

我理解您的需求是要代理HTML文件并动态替换其中的资源路径，使其指向正确的代理URL。这是一个常见的前端资源代理问题。

解决方案

修改HTML代理方法：

  1. 下载HTML内容
  2. 解析并替换其中的资源引用
  3. 将修改后的内容返回给客户端

改进后的代码实现：

// OssProxyController.java (增强版HTML代理)

// 代理HTML请求 - 增强版
@GetMapping("/html")
public void proxyHtml(@RequestParam("url") String ossUrl,
                      HttpServletResponse response) throws IOException {
    // 解析基础URL，用于替换相对路径
    String baseUrl = extractBaseUrl(ossUrl);
    
    // 获取HTML内容并替换资源路径
    String modifiedHtml = fetchAndModifyHtml(ossUrl, baseUrl);
    
    // 设置响应头
    response.setContentType("text/html; charset=utf-8");
    response.setHeader("Content-Disposition", "inline");
    
    // 返回修改后的HTML
    response.getWriter().write(modifiedHtml);
}

// 提取基础URL (例如: https://your-bucket.oss-cn-hangzhou.aliyuncs.com/path/to/)
private String extractBaseUrl(String fullUrl) {
    int lastSlashIndex = fullUrl.lastIndexOf('/');
    if (lastSlashIndex > 0) {
        return fullUrl.substring(0, lastSlashIndex + 1);
    }
    return fullUrl;
}

// 获取HTML内容并修改资源路径
private String fetchAndModifyHtml(String ossUrl, String baseUrl) throws IOException {
    Request request = new Request.Builder()
           .url(ossUrl)
           .build();
    
    try (Response ossResponse = client.newCall(request).execute()) {
        if (!ossResponse.isSuccessful()) {
            throw new IOException("OSS请求失败: " + ossResponse.code());
        }
        
        // 读取HTML内容
        String htmlContent = ossResponse.body().string();
        
        // 替换资源路径
        return replaceResourcePaths(htmlContent, baseUrl);
    }
}

// 替换HTML中的资源路径
private String replaceResourcePaths(String htmlContent, String baseUrl) {
    // 替换JS路径
    htmlContent = htmlContent.replaceAll("src=\"js/", "src=\"/api/proxy/js?url=" + baseUrl + "js/");
    htmlContent = htmlContent.replaceAll("src=\"./js/", "src=\"/api/proxy/js?url=" + baseUrl + "js/");
    
    // 替换CSS路径
    htmlContent = htmlContent.replaceAll("href=\"css/", "href=\"/api/proxy/css?url=" + baseUrl + "css/");
    htmlContent = htmlContent.replaceAll("href=\"./css/", "href=\"/api/proxy/css?url=" + baseUrl + "css/");
    
    // 替换图片路径
    htmlContent = htmlContent.replaceAll("src=\"images/", "src=\"/api/proxy/auto?url=" + baseUrl + "images/");
    htmlContent = htmlContent.replaceAll("src=\"./images/", "src=\"/api/proxy/auto?url=" + baseUrl + "images/");
    
    // 替换其他相对路径资源
    htmlContent = htmlContent.replaceAll("src=\"/", "src=\"/api/proxy/auto?url=" + baseUrl);
    htmlContent = htmlContent.replaceAll("href=\"/", "href=\"/api/proxy/auto?url=" + baseUrl);
    
    return htmlContent;
}
功能说明

改进如下：

  1. 提取基础URL：

    • 从原始URL中提取基础路径（如：https://your-bucket.oss-cn-hangzhou.aliyuncs.com/path/to/）
    • 用于构建完整的资源URL

  2. 路径替换：

    • 处理相对路径：src="js/script.js" → src="/api/proxy/js?url=https://your-bucket.oss-cn-hangzhou.aliyuncs.com/path/to/js/script.js"
    • 处理当前目录相对路径：src="./js/script.js" → src="/api/proxy/js?url=https://your-bucket.oss-cn-hangzhou.aliyuncs.com/path/to/js/script.js"
    • 同时处理CSS、图片等其他资源类型

  3. 通用资源代理：

    • 使用/api/proxy/auto接口自动识别资源类型
    • 无需为每种资源类型单独创建替换规则
使用示例

URL：

https://huarunbaizun-test.obs.cn-east-3.myhuaweicloud.com/percen-smart/productUi/0fad1362-21bd-4d5d-a0f5-21518dc4eb63/index.html

代理请求将是：

http://your-server/api/proxy/html?url=https://huarunbaizun-test.obs.cn-east-3.myhuaweicloud.com/percen-smart/productUi/0fad1362-21bd-4d5d-a0f5-21518dc4eb63/index.html

当HTML被下载后，其中的资源引用（如src="js/main.js"）会被自动替换为指向您服务端的代理URL，确保所有资源都能正确加载。

注意事项

  1. 这种正则表达式替换方法适用于大多数情况，但对于复杂的HTML结构可能不够健壮。在生产环境中，考虑使用HTML解析库（如Jsoup）进行更精确的处理。

  2. 如果HTML中包含内联JavaScript或CSS，可能会误替换其中的字符串。可以通过更复杂的正则表达式或解析器来避免这种情况。

  3. 对于大型HTML文件，这种处理方式可能会增加响应时间。考虑实现缓存机制来提高性能。

Qt案例-编译阿里云OSS对象存储C++ SDK源码，并进行简单下载，上传数据，显示进度等相关功能
每个文章的示例都可以在下载资源中找到源码，有任何问题或修改可以左下角的QQ名片私聊联系.
09-09 2098
阿里云对象存储（Object Storage Service，简称OSS），是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。用户可以通过调用API，在任何应用、任何时间、任何地点上传和下载数据，也可以通过用户Web控制台对数据进行简单的管理。OSS适合存放任意文件类型，适合各种网站、开发企业及开发者使用。
解决：PHP 阿里云OSS访问图片地址默认下载而不是在线预览
qq_36182673的博客
01-25 2101
修改文件--保存后再上传图片就可以在线预览了 vendor/aliyuncs/oss-sdk-php/src/OSS/Core/MimeTypes.php <?php namespace OSS\Core; /** * Class MimeTypes * * The map of a file's extention name to its corresponding Content-Type value in the file upload request. * If the .
js实现oss批量下载文件_JS实现下载远端图片到本地
weixin_42360722的博客
12-30 2247
背景公司静态资源存储采用的是阿里云的oss服务，会返回一个如下的静态资源链接：http://static.xxxxxxx.com/5b7fe45205691500062a1c59/3315E3869EFD673014AAB086D9C2CD9B?x-oss-process=image/format,jpg需要提供一个点击下载图片的按钮，如下图所示，点击可以下载该图片。 踩坑过程1、通过window...
阿里云oss对象存储只能下载不能预览图片或pdf
qq_42793119的博客
05-02 327
官方说了默认域名不可以，只能自定义域名（备案审核麻烦），可以代码层面接收文件流数据进行预览，但是如果只是托管文件预览，不建议使用阿里云，推荐使用gitee或者github。其中xqs0320_0是仓库名字，xxx是pdf名字，master分支名字（如果不知道该怎么填写，就查看自己gitee上传的文件里面路径是什么，之后按照我提供的连接格式去修改）自己使用gitee创建一个pdf-preview仓库。
解决 阿里云oss 对象存储 bucket 中的文件不能在线预览 只能下载
木头分享 - 分享有价值的、实用的干货
10-20 1622
记录值 填你的bucketname 就是你存储文件的bucket的名字 然后 . 域名所在区域 北京就是oss-cn-beijing.aliyuncs.com。的bucket列表中找到存放文件的bucket，点击进入，并点击左侧的传输管理中的域名管理。如果还是显示不出来，可能是刚刚解析的域名，没有开ssl，自己可以去申请免费的ssl就行了。记录类型选 CNAME；我的域名是在腾讯云的，所以点开腾讯云的域名解析后台。TTL 默认的 10分钟不用改。配置完成后，在对象存储。
oss pdf浏览器直接下载_前端从阿里云oss直接下载文件的方法
weixin_33321740的博客
12-23 4216
HTTP下载，即浏览器下载。浏览器中使用signatureUrl方法生成可下载的HTTP地址，URL的有效时间默认为半个小时。以下代码用于HTTP下载：let OSS = require("ali-oss");let client = new OSS({region: "",accessKeyId: "",accessKeySecret: "",bucket: ""，});let url = c...
功能实现——通过阿里云 OSS 实现文件管理
代码星辰的博客
08-03 1951
本文介绍了如何通过阿里云 OSS 实现文件管理。
oss pdf浏览器直接下载_轻松下载.pdf文件（直接下载，而不是在IE浏览器里面打开）...
weixin_42522575的博客
12-23 738
在下载*.pdf文件的时候，通常是在IE窗口里面打开，然后在按“保存”按钮保存在本地，但是 本人用起来觉得很是不爽，尤其是PDF文件很大的时候(>10M)。很希望PDF文件也能像其他文件一样(*.ZIP, *.RAR等)，下载的时候也能出现一个下载框，点击“保存”就可以将其保存在本地。。。经过尝试，按如下步骤可以达到这个目的：(1)修改 HKEY_CLASSES_ROOT/AcroExch....
oss pdf浏览器直接下载_阿里云oss直接下载的小技巧
weixin_42221522的博客
12-23 1706
需求：点击图片的下载链接直接触发浏览器下载，而不是浏览器打开图片。思路：1、谷歌浏览器在点击图片链接的时候往往是直接打开图片而不是下载；2、首先考虑的是在a标签上增加download属性来触发下载，但是由于该属性有跨域限制，导致失效；3、其次考虑在Response头上增加“Content-Disposition“字段，格式为“Content-Disposition=attachment;filen...
阿里云 OSS PDF文件预览和下载
以学徒心态作为成长的基石，保持谦逊、不断学习。
08-30 5632
无论是使用 Java 还是 Go（Gin），我们可以通过设置响应头部来实现这一效果。以上述代码示例为例，通过在响应中设置 Content-Disposition 为 attachment 或 inline，你可以控制浏览器如何处理下载文件。需要注意的是，浏览器在展示文件时的行为可能会因文件类型、浏览器设置以及用户操作等因素而有所不同。因此，实际效果可能因浏览器和文件类型而异
java实现上传文件到oss(阿里云)功能示例
08-25
Java 实现上传文件到 OSS（阿里云）的功能示例 Java 实现上传文件到 OSS（阿里云）的功能示例是指通过 Java 语言实现将文件上传到阿里云对象存储服务（OSS）的功能。本示例主要介绍了 Java 实现上传文件到 OSS 的...
java 实现oss文件上传、下载文件、流格式文件
A_com_Z的博客
08-25 8327
1.实现OSS文件上传，则需要准备的东西是：连接点endpoint、秘钥key、秘钥secret private static final String endpoint = "<your endpoint>"; private static final String accessKeyId = "your accessKeyId"; private static final String accessKeySecret = "accessKeySecret"; 2.尝试连接
SpringBoot实现oss文件的上传与下载
12程序猿的博客
12-28 3640
SpringBoot实现oss文件的上传与下载 最近项目中需要通过OSS来实现文件的上传和下载以及根据oss文件（word模板）生成Word，特此记录，以便日后查阅。 一、相关概述 OSS对象存储   阿里云对象存储服务（Object Storage Service，简称 OSS），是阿里云提供的海量、安全、低成本、高可靠的云存储服务。OSS可用于图片、音视频、日志等海量文件的存储。各种终端设备、Web网站程序、移动应用可以直接向OSS写入或读取数据。 OSS相关概念    （1）Endpoint：外网访问
js 导出pdf上传至oss_微信小程序环境下将文件上传到OSS的方法步骤
weixin_39997695的博客
12-22 266
步骤 1： 配置 Bucket 跨域客户端进行表单直传到 OSS 时，会从浏览器向 OSS 发送带有 Origin 的请求消息。OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的验证。因此需要为 Bucket 设置跨域规则以支持 Post 方法。步骤 2：配置外网域名到小程序的上传域名白名单中通过 OSS 控制台查看外网域名。登录微信小程序平台，配置小程序的上传域名白名单。步骤...
jsPDF和html2canvas生成pdf,组件用的elementplus，亲测30多页，20s实现
smile
07-03 426
【代码】jsPDF和html2canvas生成pdf,组件用的elementplus，亲测30多页，20s实现。
PDF转换工具，即开即用
wzk1681106的博客
07-06 775
在办公室里，这句话被反复验证。每天面对成堆的Word和Excel文件，将它们转换成PDF格式是常有的事。可之前用过的工具，不是一次只能转一个，就是操作繁琐得让人头疼。记得有次赶项目，需要把二十多个文档转成PDF，我盯着屏幕一个个处理，手指点得发酸，好不容易弄完，还因为操作失误弄错了两个，差点耽误了提交时间。从那以后，我就一直在找一款能批量转换的工具，直到遇见了它，才算真正解脱。
RAG实战指南 Day 8：PDF、Word和HTML文档解析实战
最新发布
在未来等你的专栏
07-07 651
今天我们深入探讨了PDF、Word和HTML文档解析技术，掌握了处理企业知识库文档的完整技术栈。通过合理组合专用解析库和后处理技术，可以高质量地提取各类文档中的结构化信息，为RAG系统提供可靠的知识来源。不同文档格式需要针对性的解析策略混合使用多种工具可以获得最佳效果后处理是提升质量的关键步骤企业场景需要平衡准确率和性能明天我们将探讨【Day 9: 多模态数据处理：图片与表格数据】，学习如何从图像和表格中提取有价值的信息，进一步扩展RAG系统的知识获取能力。
使用Python将PDF转换成word、PPT
qq_42985051的博客
07-06 668
理解pdf2docx的关键在于认识到它并非一个单一的转换引擎，而是一个高层编排库。数据提取：它依赖于功能强大的PyMuPDF（也被称为fitz）库来从PDF文件中提取底层数据，包括文本内容、位置信息、图像以及矢量图形（如线条和矩形）。布局解析：在提取原始数据后，pdf2docx应用一套复杂的、基于规则的算法来解析和推断文档的布局。它会尝试识别文本块、段落、表格、多栏结构以及页眉页脚。文档生成：最后，它使用。
HuggingFists: 无代码处理复杂PDF
colorknight的专栏
07-05 909
Docling内置了很多功能配置项，但是Docling算子只封装了其中的一部分。如果希望调整和配置更多的配置项，可以试着去修改算子的Python脚本片段。这里的脚本片段为实际运行Docling时所需的脚本片段。好了，现在可以使用HuggingFists去自动化处理复杂PDF文档了。
阿里云oss上传pdf下载
01-03
### 阿里云 OSS PDF 文件上传与下载 #### 一、环境准备 为了实现阿里云OSS上的PDF文件上传和下载操作，需先完成以下准备工作： - 安装并配置好Java开发环境（适用于采用Java SDK的情况），对于其他编程语言则安装对应版本的SDK。 - 注册成为阿里云用户，并创建存储空间(Bucket)，获取AccessKeyId以及AccessKeySecret。 #### 二、PDF文件上传至阿里云OSS 利用阿里云官方提供的多种语言版SDK可以轻松地将PDF文档上传到指定Bucket内。以下是基于Python语言的一个简单实例[^2]： ```python import os from aliyunsdkcore.client import AcsClient from aliyunsdkoss.request.v20190517.PutObjectRequest import PutObjectRequest def upload_pdf_to_oss(file_path, bucket_name='your-bucket-name'): client = AcsClient('<Your Access Key Id>', '<Your Access Key Secret>', 'cn-hangzhou') request = PutObjectRequest(bucket_name=bucket_name) file_name = os.path.basename(file_path) with open(file_path, "rb") as f: content = f.read() response = client.do_action_with_exception(request.set_content(content).set_key(file_name)) print(f'Upload {file_name} successfully.') ``` 此段代码实现了从本地路径读取PDF文件并通过API接口将其放置于设定的目标Bucket之中。 #### 三、从阿里云OSS下载PDF文件 同样借助阿里云提供的SDK功能可以从云端获取之前上传过的PDF资源。这里给出一段用于下载文件的例子： ```python from aliyunsdkcore.client import AcsClient from aliyunsdkoss.request.v20190517.GetObjectRequest import GetObjectRequest def download_pdf_from_oss(object_name, save_as, bucket_name='your-bucket-name'): client = AcsClient('<Your Access Key Id>', '<Your Access Key Secret>', 'cn-hangzhou') get_request = GetObjectRequest(bucket_name=bucket_name, key=object_name) result = client.do_action_with_exception(get_request) with open(save_as, 'wb') as fp: fp.write(result) print('Download completed!') ``` 上述函数接收三个参数：`object_name`(即要下载的对象名称), `save_as`(保存后的文件名) 和可选参数bucket的名字，默认为'your-bucket-name'. 执行后会把对应的PDF文件保存到当前工作目录下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值