继上次的手机pdf文件预览方案,前端使用pdf预览插件,后端返回文档流渲染方式。这种方式预览性能消耗太大,插件原理是通过绘制canvas进行渲染,性能不好且插件本身有不少问题,尤其是在移动端list渲染时比较明显。
原文链接:文档流预览方式
思量再三,最后后端接口返回时,将pdf文件转为base64格式,前端使用图片方式进行渲染,考虑到有文件较大的情况,接口分页,前端进行list懒加载,这种方式相比于之前的预览方式性能提高了很多。增加缩放功能,在线预览的功能基本满足。代码如下:
<div className={styles.btnContainer}>
<span>缩放</span>
<Slider
min={0.5}
max={2}
defaultValue={1}
step={0.1}
className={styles.mySlider}
onChange={onChangeScale}
/>
</div>
<List>
{flowData.map((e: any, index: any) => (
<div className={styles.pdfContainer} key={index}>
{/* pdf图片遮罩,iphone中禁止长按图片下载 */}
<div></div>
<img
src={'data:img/jpeg;base64,' + e}
alt=""
style={{ width: '100%' }}
/>
</div>
))}
</List>
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
const loadMore = async () => {
setPageNum(pageNum + 1);
if (pageNum !== 0 && titHash) {
let res = await readOnline({ titHash, pageNum });
if (viewerContainerDom.current && pdfPreviewRefDom.current) {
if (res?.success) {
let append = res.data?.bytesBase64;
if (!pdfListTotal) {
setPdfListTotal(res.data.pageCount);
}
setFlowData((val) => [...val, ...[append]]);
}
}
}
};
基本思路就是这些和代码就这些,由于pdf内容敏感不便截图录制gif,各位兄弟可以动手尝试查看效果~