在MVC控制器返回文件列表，用jQuery/Angular实现多文件打开/下载

我来帮你搞定这个需求！你的后端已经写好了返回PDF列表的接口，接下来用jQuery实现打开新标签页预览或下载PDF的功能很简单，分步骤来：

首先先整理下你的后端代码（方便查看）：

public class QuietanzaPdf 
{ 
    public QuietanzaPdf() { } 
    public string QuietanzaBody { get; set; } 
    public string QuietanzaName { get; set; } 
} 

[HttpPost] 
public List<QuietanzaPdf> GetPdfs() 
{ 
    List<QuietanzaPdf> listaPdfQuietanza = new List<QuietanzaPdf>(); 
    foreach (var objectQuietanza in listOfPdf) 
    { 
        listaPdfQuietanza.Add(new QuietanzaPdf() 
        { 
            QuietanzaBody = objectQuietanza.Contents, 
            QuietanzaName = objectQuietanza.FileName 
        }); 
    } 
    return listaPdfQuietanza; 
}

接下来用jQuery实现两个核心功能，你可以根据需求选择使用：

1. 调用后端接口并遍历PDF列表 #

先发起POST请求拿到PDF数据，再逐个处理每个文件：

$(document).ready(function() {
    // 替换成你实际的后端接口路由，比如你的控制器叫PdfController，就写'/Pdf/GetPdfs'
    $.post('/你的控制器名/GetPdfs', function(response) {
        // 遍历返回的所有PDF项
        $.each(response, function(index, pdfItem) {
            // 二选一：要么打开新标签页预览，要么下载
            openPdfInNewTab(pdfItem);
            // downloadPdf(pdfItem);
        });
    }).fail(function(error) {
        console.error('获取PDF列表失败:', error);
        alert('加载PDF出错，请稍后重试');
    });
});

2. 在新标签页打开PDF预览 #

这个方法会把后端返回的base64格式PDF内容转成Blob，再创建临时URL打开新标签页：

function openPdfInNewTab(pdfItem) {
    // 处理base64前缀：如果后端返回的QuietanzaBody带"data:application/pdf;base64,"，先去掉
    let base64Data = pdfItem.QuietanzaBody.replace(/^data:application\/pdf;base64,/, '');
    // 把base64转成Blob对象
    let byteCharacters = atob(base64Data);
    let byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    let byteArray = new Uint8Array(byteNumbers);
    let blob = new Blob([byteArray], { type: 'application/pdf' });
    
    // 创建临时URL并打开新标签页
    let url = URL.createObjectURL(blob);
    window.open(url, '_blank');
    
    // 手动释放临时URL（浏览器会自动回收，加这个更严谨）
    setTimeout(() => URL.revokeObjectURL(url), 1000);
}

3. 下载PDF到本地资源管理器 #

同样先转成Blob，再通过创建隐藏的a标签模拟点击触发下载：

function downloadPdf(pdfItem) {
    // 处理base64前缀
    let base64Data = pdfItem.QuietanzaBody.replace(/^data:application\/pdf;base64,/, '');
    let byteCharacters = atob(base64Data);
    let byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    let byteArray = new Uint8Array(byteNumbers);
    let blob = new Blob([byteArray], { type: 'application/pdf' });
    
    // 创建a标签并触发下载
    let url = URL.createObjectURL(blob);
    let a = document.createElement('a');
    a.href = url;
    a.download = pdfItem.QuietanzaName; // 设置下载的文件名
    document.body.appendChild(a);
    a.click();
    
    // 清理临时元素和URL
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

几个注意点 #

• 记得替换代码里的接口路由为你实际的后端地址
• 确保后端返回的QuietanzaBody是正确的PDF文件base64编码，如果后端存的是字节数组，要先转成base64再返回（比如用Convert.ToBase64String(objectQuietanza.Contents)）
• Chrome可能会拦截自动弹出的新标签页，建议把操作绑定到用户的点击事件上（比如一个按钮点击后再执行打开逻辑），避免被拦截

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