我有一个api,它为json-object提供了指向pdf的链接
{ pdf_link: 'http://localhost:3000/logs.pdf' }
当用户单击文件名时,我想在单独的浏览器选项卡中打开此pdf。
我尝试在a
标记中将网址作为href
<a href={response.pdf_link} target='_blank'>{FileName}</a>
但是当我单击链接时,正在下载pdf,而不是在浏览器选项卡中打开。
我找到了this个博客帖子,并尝试了以下操作。
import axios from 'axios';
import React from 'react';
export const PdfLink = ({ apiResponse }: any) => {
const showFile = (blob: Blob, fileName: string) => {
const newBlob = new Blob([blob], {type: 'application/pdf'});
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(newBlob);
return;
}
const data = window.URL.createObjectURL(newBlob);
const link = document.createElement('a');
link.href = data;
link.download = fileName;
link.click();
setTimeout(() => {
window.URL.revokeObjectURL(data);
}, 100);
};
const onClickLink = () => {
axios({
method: 'GET',
responseType: 'blob',
url: apiResponse.pdf_link,
})
.then(r => showFile(r.data, apiResponse.fileName));
};
return (
<span className='link' onClick={onClickLink}>
file.pdf
</span>
);
};
但是在api调用中获取文件blob失败。
axios({
method: 'GET',
responseType: 'blob',
url: apiResponse.pdf_link,
})
错误:Access to XMLHttpRequest at 'http://localhost:3005/file.pdf' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
下图显示了api调用的请求和响应标头
我知道上述错误是由于cors引起的,但在服务器中,我也允许来自其他来源的请求
app.use(KoaCors({ origin: '*', credentials: true }));
我在做什么错了?
答案 0 :(得分:0)
您可以使用对象标签显示pdf:-
<object
data={/* url of your pdf file*/}
type="application/pdf"
width="100%"
height="100%"
></object>
有关更多信息,请参见此处 https://www.w3schools.com/tags/tag_object.asp