背景：pdf文件存儲在服務端文件名都是id命名的。使用chrome自帶的文件預覽下載時導出的文件名也是id.pdf。需要下載的文件名是源文件上傳時的文件名。

方案：pdf.js 修改部分源碼

1. 下載pdf.js

2.將下載好的文件中的build和web拷貝到vue項目的public文件夾下

image.png

3.修改viewer.js的getPDFFileNameFromURL方法

function getPDFFileNameFromURL(url) {
  // 添加如下三行代碼
  let customUrl = decodeURIComponent(window.location.href)
  let filename = new URL(customUrl).searchParams.get('filename') || ''
  if (filename) return filename

  var defaultFilename = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'document.pdf';
  if (isDataSchema(url)) {
    console.warn('getPDFFileNameFromURL: ' + 'ignoring "data:" URL for performance reasons.');
    return defaultFilename;
  }
  var reURI = /^(?:(?:[^:]+:)?\/\/[^\/]+)?([^?#]*)(\?[^#]*)?(#.*)?$/;
  var reFilename = /[^\/?#=]+\.pdf\b(?!.*\.pdf\b)/i;
  var splitURI = reURI.exec(url);
  var suggestedFilename = reFilename.exec(splitURI[1]) || reFilename.exec(splitURI[2]) || reFilename.exec(splitURI[3]);
  if (suggestedFilename) {
    suggestedFilename = suggestedFilename[0];
    if (suggestedFilename.indexOf('%') !== -1) {
      try {
        suggestedFilename = reFilename.exec(decodeURIComponent(suggestedFilename))[0];
      } catch (ex) {}
    }
  }
  return suggestedFilename || defaultFilename;
}

4.使用的時候url上拼接上filename參數(shù)

const href = pdf文件資源路徑
const filename = 需要下載的文件名
window.open(`./pdf/web/viewer.html?file=${encodeURIComponent(href)}&filename=${filename}`);