使用pdf.js 实现pdf文件预览下载、更改预览title及下载文件名。

背景: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参数

const href = pdf文件资源路径
const filename = 需要下载的文件名
window.open(`./pdf/web/viewer.html?file=${encodeURIComponent(href)}&filename=${filename}`);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容