pdf.js更改所展示的文件名称

在文件存储时，为了防止文件名重复，在服务器上存的文件名可能是UUID这种，而非真正的文件名。
使用pdf.js对文件进行预览时，默认会显示存储文件的UUID名字。所以我想对这里进行修改，显示文件的真名字。

两个方法：
1、前端修改，适用于只展示用的，下载时文件名还是uuid的鬼样子。。
2、后端文件流传输时修改
个人推荐第二种方式。

一、前端修改

1、修改源码

需要改动的只有几行代码。
pdf.js的文件包中有一个viewer.js的文件，在viewer.js中找到设置标题文件名的方法：

setTitleUsingUrl(url = ""){
  this.url = url;
  this.baseUrl = url.split("#")[0];
  let title = (0, _ui_utils.getPDFFileNameFromURL)(url, "");
  if (!title) {
    try {
      title = decodeURIComponent((0, _pdfjsLib.getFilenameFromUrl)(url)) || url;
    } catch (ex) {
      title = url;
    }
  }
  this.setTitle(title);
},

把这个方法改为下面这样：

setTitleUsingUrl(url = ""){
    var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    this.url = url;
    var TITLE = localStorage.getItem("filename");
    try {
        var titleTmp = (TITLE == '' || TITLE == undefined) ? (decodeURIComponent(pdfjsLib.getFilenameFromUrl(url)) || url) : TITLE;
        this.setTitle(titleTmp);
    } catch (e) {
        this.setTitle(url);
    }
},

大概意思就是查找本地存储的key/value值，即文件真名，如果找到了就用真名，没找到就用原名。

2、设置真名

有了第一步，再在调用pdf.js之前把真名字放到本地存储中，就可以了：

localStorage.setItem("filename", data.file_name);//将文件名 放入本地存储

window.open("/static/js/。。。/web/viewer.html?file=" + encodeURIComponent("/file/ShowFile?filePath="+filePath));

二、后端修改

这个就更简单了，在传输文件流时加上一句

response.addHeader("Content-Disposition","attachment;filename=" + downloadFileName);
//downloadFileName是想设置的文件名

就ok了！

使用第二种方式的话，预览Title和下载时的名字都会被修改，而且会覆盖掉方法一设置的Title。