背景：pdf文件存儲(chǔ)在服務(wù)端文件名都是id命名的。使用chrome自帶的文件預(yù)覽下載時(shí)導(dǎo)出的文件名也是id.pdf啃炸。需要下載的文件名是源文件上傳時(shí)的文件名铆隘。
方案：pdf.js 修改部分源碼
2.將下載好的文件中的build和web拷貝到vue項(xiàng)目的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.使用的時(shí)候url上拼接上filename參數(shù)
const href = pdf文件資源路徑
const filename = 需要下載的文件名
window.open(`./pdf/web/viewer.html?file=${encodeURIComponent(href)}&filename=${filename}`);
