需求：需要将后端返回的文件地址读出来，然后在页面上预览
1.分析
开始需求的时候我使用的是iframe标签去实现的，如下代码，因为返回来的是一个文件对象，需要使用Blob实例化，上面是官网的blob资料，这里v是一个Blob数据，然后使用createObjectUrl将blob转为服务器上的url地址，然后展示即可
const res: any = await fetch(`${selected_content?.doc_type}`);
res.blob().then((v: any) => {
let blob = new Blob([v], { type: 'application/pdf' })
const url = URL.createObjectURL(blob);
anchorJsx = <div style={{height: '100%'}} className='markdown-body'>
<iframe src={url} title="pdf" style={{height: '100vh', width:'100%'}} />
</div>
})
2.Bug
1中的方式，因为页面是需要跨端的，在移动端上pdf无法显示，且无法样式自适应，我们就另找它法，使用频率很高的react-pdf是最合适的（react-pdf - npm）API也很友好，下面我们进入实践。
3.实践
1）首先一定是安装插件
npm install --save react-pdf，如果你是用了s不要忘记安装相应的ts版本，这个vscode都会有提示；
2）安装成功后我们引入，官方有详细的样例：
import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';
function MyApp() {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages);
}
return (
<div>
<Document file="somefile.pdf" onLoadSuccess={onDocumentLoadSuccess}>
<Page pageNumber={pageNumber} />
</Document>
<p>
Page {pageNumber} of {numPages}
</p>
</div>
);
}踩坑：还是很简单的，但是这里面进来就会才一个坑，报错如下：
?npm上继续看文档，会有详细的解释：
大概意思就是你项目下无法访问这个文件，解决方案，我们更换了CDN，如下（pdf对象来自react-pdf）：
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cat.net/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;?3）下来完善我们的代码
如果按照样例那样写，<Page/>组件只循环了一遍，pageNumber也没有变一直是默认的1，但是我们获取到了所有页数numPages，然后如果想一下预览所有的pdf页，我们只要去循环1~numPages就好，for循环比较笨，我们这样写：
<Document file={selected_content?.doc_type} onLoadSuccess={onDocumentLoadSuccess}>
{
new Array(numPages).fill('').map((_item, index) => {
return <Page scale={2} key={index} pageNumber={index + 1} />
})
}
</Document>new Array创建了一个有numPages项元素的数组，然后我们给每一个元素赋值使用fill方法，这样这个数组就有个55项，那么我们只要使用下标就好了
注：组件还有许多属性，例如我用到的scale就是放大的倍数，可以试页面不失真，如果单纯放大宽度会模糊，因为本身他原是大小就是720*405，比较小。
4）现在我们就完成了，效果如下，也会根据
宽度自适应 ，移动端也可以适配。
最后，我们可以在完善下，比如每次加载五页，点击加载更多，会在出现5页，这个前端截取数据就可以实现，这个就不具体实现了，that's all
