ASP.Net Webforms中如何在Div中显示数据库存储的PDF字节数据？

问题根源 #

1. 直接将PDF的Data URI写入div的InnerHtml无效——div本身不具备渲染PDF内容的能力。
2. Image控件仅支持JPG、PNG等图片格式，无法解析PDF文件，因此设置ImageUrl也不会显示内容。

可行解决方案 #

方案1：用<embed>标签嵌入PDF #

修改后台代码，将PDF的base64字符串直接构造为<embed>标签的HTML内容，再赋值给div：

string str = dt.Rows[0]["pdfPage"].ToString();
// 构造支持PDF渲染的embed标签
string pdfEmbedHtml = $"<embed src='data:application/pdf;base64,{str}' width='100%' height='600px' type='application/pdf'>";
pdfShow.InnerHtml = pdfEmbedHtml;

• 说明：<embed>是浏览器原生支持的嵌入标签，多数现代浏览器可直接渲染PDF，可通过调整width和height控制显示区域大小。

方案2：通过ASHX一般处理程序输出PDF #

若Data URI方式存在兼容性问题（如旧浏览器），可创建ASHX处理程序返回PDF字节流，再通过页面标签引用：

1. 添加一般处理程序PdfHandler.ashx，代码如下：

public class PdfHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        // 实际项目中可通过URL参数传递ID，查询对应PDF记录
        string pdfBase64 = dt.Rows[0]["pdfPage"].ToString();
        byte[] pdfBytes = Convert.FromBase64String(pdfBase64);
        
        context.Response.ContentType = "application/pdf";
        context.Response.BinaryWrite(pdfBytes);
        context.Response.End();
    }

    public bool IsReusable => false;
}

2. 在页面div中添加<iframe>引用该处理程序：

<div id="pdfShow" runat="server">
    <iframe src="PdfHandler.ashx" width="100%" height="600px"></iframe>
</div>

• 说明：该方式更适合大体积PDF，避免Data URI过长导致的性能问题，且兼容性更强。

方案3：用PDF.js增强跨浏览器兼容性 #

若需适配更多旧浏览器，可使用PDF.js将PDF渲染为Canvas：

1. 将PDF.js核心文件（pdf.js、pdf.worker.js）放入项目中。
2. 在页面添加容器和脚本：

<div id="pdfShow" runat="server">
    <canvas id="pdfCanvas"></canvas>
</div>

<script>
    // 从后台获取PDF的base64字符串
    var pdfBase64 = '<%= dt.Rows[0]["pdfPage"].ToString() %>';
    var pdfData = atob(pdfBase64);
    var pdfArray = new Uint8Array(pdfData.length);
    for (var i = 0; i < pdfData.length; i++) {
        pdfArray[i] = pdfData.charCodeAt(i);
    }

    pdfjsLib.getDocument({data: pdfArray}).promise.then(function(pdf) {
        // 渲染PDF第一页
        return pdf.getPage(1);
    }).then(function(page) {
        var scale = 1.5;
        var viewport = page.getViewport({scale: scale});
        var canvas = document.getElementById('pdfCanvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });
</script>

• 说明：PDF.js支持分页、缩放等功能，兼容性覆盖多数新旧浏览器。

关键注意事项 #

• 确认数据库中存储的base64字符串是完整有效的PDF编码，无损坏或截断。
• 测试不同浏览器兼容性：<embed>在Chrome、Firefox、Edge中表现良好，IE可能需要额外插件支持。

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