背景
上传了pdf文件之后,点击查看,跳转pdf的url,期望是浏览器中预览,而不是直接下载
原理
需要pdf资源url的响应头是下面下面这2个属性
Content-Type: application/pdf
Content-Disposition: inline;
如何做
- 如果pdf资源服务器是自己内部可修改的,那就让服务修改下响应头
- 如果无法修改,可以自己写一个代理服务,服务端请求到资源后,修改响应头,在返回给客户端
代理服务的代码实现
请求方式:http://localhost:3000/get-pdf?url=http://xxxxx/xxxxx.pdf
注意:pdf资源的url不要使用https,否则会验签失败
const http = require('http');
const nodefetch = require('node-fetch');
const PORT = 3000;
const server = http.createServer(async (req, res) => {
if (req.url === '/get-pdf' && req.method === 'GET') {
let PDF_URL = req.query.url
let pass = await checkUrl(PDF_URL)
if (!pass) {
res.send('Not Found');
return
}
// 请求第三方PDF文件
let data = null
try {
data = await nodefetch(PDF_URL, {
method: "GET",
headers: {
"Content-Type": "application/pdf",
}
})
} catch (error) {
data = {
body: 'error'
}
}
// 重点在这里
res.setHeader('Content-Type', 'application/pdf')
res.setHeader('Content-Disposition', 'inline')
data.body.pipe(res)
} else {
res.writeHead(404, { 'Content-Type': 'text/plain' });
res.end('Not Found');
}
});
function checkUrl(url){
// 可以配置白名单,或者域名校验一下
url = decodeURIComponent(url)
let domain = url.split('/')[2]
if (domain === 'localhost:3000'){
return true
} else {
return false
}
server.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});