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

https://blog.csdn.net/kangrushuai/article/details/107766612

在文件存储时，为了防止文件名重复，在服务器上存的文件名可能是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);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
把这个方法改为下面这样：

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);
}
},
1
2
3
4
5
6
7
8
9
10
11
大概意思就是查找本地存储的key/value值，即文件真名，如果找到了就用真名，没找到就用原名。

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

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

window.open("/static/js/。。。/web/viewer.html?file=" + encodeURIComponent("/file/ShowFile?filePath="+filePath));
1
2
3
二、后端修改
这个就更简单了，在传输文件流时加上一句

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

使用第二种方式的话，预览Title和下载时的名字都会被修改，而且会覆盖掉方法一设置的Title。
————————————————
版权声明：本文为CSDN博主「27号白开水」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kangrushuai/article/details/107766612