Chrome正常但IE/Web环境无法显示Base64编码PDF的问题求助

我来帮你分析下这个问题哈：你用object标签加载内联的base64 PDF在本地Chrome能正常显示，但部署到线上或用IE就失效，主要有这两个核心原因：

• IE浏览器的限制：IE对data URI的长度上限很低（大概32KB），而且原生PDF查看器对通过data URI加载的文件支持很差，object标签基本没法正常渲染；
• Web环境的约束：线上服务器/反向代理可能会限制HTTP响应的内容长度，或者浏览器的安全策略（比如CSP）会拦截大体积的内联base64资源，部分CDN也会过滤这类内容。

下面给你几个靠谱的解决方案，按推荐优先级排序：

方案1：通过后端接口返回PDF流（最推荐） #

把Session里的PDF字节流通过单独的API接口返回，不要直接内联到HTML里，这是兼容性最好的做法，所有浏览器都能搞定。

后端代码示例（ASP.NET为例）： #

public ActionResult GetPdf()
{
    // 从Session取出PDF字节数组
    byte[] pdfBytes = Session["Pdf"] as byte[];
    if (pdfBytes == null)
        return NotFound();
    
    // 返回PDF文件流，设置正确的MIME类型
    return File(pdfBytes, "application/pdf", "document.pdf");
}

前端HTML代码： #

<body>
    <object data="/Home/GetPdf" type="application/pdf" style="width: 100%; height: 100vh;" frameborder="0" scrolling="no">
        <!-- 浏览器不支持PDF预览时的降级提示 -->
        <p>您的浏览器无法预览PDF，请<a href="/Home/GetPdf">点击下载文件</a></p>
    </object>
</body>

这个方案的好处：

• 完美兼容IE（只要IE装了Adobe Reader这类PDF插件）；
• 避开了data URI的长度限制；
• 服务器可以正确处理缓存和HTTP头，加载速度更快。

方案2：用PDF.js兼容IE（必须内联时可选） #

如果因为业务限制不能用接口返回，那可以用PDF.js库来渲染PDF，它能在IE11及以上版本正常工作，同时也兼容现代浏览器。

前端代码示例： #

<body>
    <div id="pdfContainer" style="width: 100%; height: 100vh;"></div>

    <!-- 引入本地部署的PDF.js脚本（不要用外链） -->
    <script src="/js/pdf.min.js"></script>
    <script>
        // 从Session获取base64格式的PDF数据
        const pdfBase64 = '@Session["Pdf"]';
        // 解码base64为二进制数据
        const pdfData = atob(pdfBase64);
        let pdfDoc = null;
        const initialPage = 1;
        const scale = 1.5;
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const container = document.getElementById('pdfContainer');
        container.appendChild(canvas);

        // 渲染指定页码的PDF内容
        function renderPage(pageNum) {
            pdfDoc.getPage(pageNum).then(page => {
                const viewport = page.getViewport({scale: scale});
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                page.render(renderContext).promise.then(() => {
                    // 可以在这里添加分页导航逻辑
                });
            });
        }

        // 初始化PDF文档并渲染第一页
        pdfjsLib.getDocument({data: pdfData}).promise.then(pdfDoc_ => {
            pdfDoc = pdfDoc_;
            renderPage(initialPage);
        });
    </script>
</body>

方案3：调整Web环境配置（坚持用data URI时） #

如果你一定要用原有的内联方式，需要检查线上服务器的配置：

• IIS服务器：修改web.config，增大请求/响应长度限制：

<system.web>
    <!-- 设置最大请求长度为1GB -->
    <httpRuntime maxRequestLength="1048576" />
</system.web>
<system.webServer>
    <security>
        <requestFiltering>
            <!-- 设置最大允许的内容长度为1GB -->
            <requestLimits maxAllowedContentLength="1073741824" />
        </requestFiltering>
    </security>
</system.webServer>

• 内容安全策略（CSP）：如果服务器配置了CSP头，需要把data:添加到object-src或default-src规则里，允许加载data URI资源。

内容的提问来源于stack exchange，提问作者Veronica Gravino