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