使用JavaScript XMLHttpRequest在浏览器中打开预览PDF的问题排查

修复PDF预览时下载按钮异常问题 #

你遇到的下载文件名显示UUID、Windows下报网络错误的核心原因有三个：

• 使用Blob构造的对象没有携带文件名信息，Chrome内置PDF阅读器会默认取Blob地址末尾的UUID作为下载文件名
• 直接通过window.open打开纯Blob地址时，部分Windows版本Chrome的安全策略会拦截Blob源的下载请求，触发网络错误
• 之前配置的content-disposition响应头不生效，是因为响应内容已经被转为本地Blob对象，浏览器读取Blob地址时不会保留原服务端的响应头信息

直接把Blob替换为继承自Blob的File对象构造资源，即可给资源绑定默认文件名，修复下载异常问题，修正后的核心代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/api/download', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    // 用File代替Blob，第二个参数传入需要设置的默认PDF文件名
    var pdfFile = new File([this.response], '文档预览.pdf', {type: 'application/pdf'}),
        url = URL.createObjectURL(pdfFile);
    window.open(url, '_blank');
    // 释放内存，避免ObjectURL长期占用资源
    setTimeout(() => URL.revokeObjectURL(url), 1000);
  }
};
xhr.send();

隐藏PDF阅读器自带的下载图标 #

如果不需要使用浏览器自带的下载功能，有两种实现方式：

• 快速实现：在生成的Blob地址后拼接Chrome内置PDF阅读器的控制参数，直接隐藏整个顶部工具栏
  把生成URL的代码改为如下形式即可，打开后所有工具栏控件（含下载、打印按钮）都会被隐藏：

  url = URL.createObjectURL(pdfFile) + '#toolbar=0';
  

  注意：该参数是Chrome内置PDF阅读器的私有参数，不同浏览器兼容性存在差异，且无法单独隐藏下载按钮、保留其他翻页/缩放功能。
• 自定义可控方案：引入PDF渲染库自行实现预览页，所有UI控件完全自定义
  如果需要保留其他预览功能、仅移除下载按钮，不要直接打开Blob地址，自行编写预览页面，用PDF渲染库把PDF内容渲染到canvas上，页面上自主实现翻页、缩放等需要的功能，不渲染下载按钮即可。这种方案兼容所有浏览器，UI交互完全可控。

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