前端怎么预览pdf 试了几种方法都不太行 有没有别的办法?

作者站长头像
站长
· 阅读数 6

前端怎么预览pdf iframe和一些库 要么完全打不开 白屏 要么只能看第一页 企微自建应用

回复
1个回答
avatar
test
2024-06-25

PDF 虽然都叫 PDF,但其实内部有很多设计,可以支持到不同的人看到不同的内容。

所以首先你要确认这个 PDF 是可以全部打开阅览的。你可以拖到浏览器一个单独的 tab 里试试,目前浏览器应该都支持 PDF。

至于如何使用 pdfjs,贴一段我自己读取 PDF 内容的代码吧:

import { getDocument } from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker?worker';

export async function getContentFromPdf(pdf: ArrayBuffer): Promise<string> {
  const doc = await getDocument(pdf).promise;
  let content = '';
  for (let i = 0, len = doc.numPages; i < len; i++) {
    const page = await doc.getPage(i + 1);
    const textContent = await page.getTextContent();
    content += textContent.items
      .map(item => (item as TextItem).str).join(' ');
  }
  return content;
}

其实官方文档渲染部分写得比较详细,就是导入部分没怎么提,所以你可以两相配合一下,应该就能解决问题了。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容