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

Question

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

Answer 1

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;
}

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

Answer 2

pc 就 iframe embed 直接读。

移动端就 pdfjs

---

如果 iframe 都只能看第一页，估计是 pdf 有问题

可以考虑后端转一下，不行就转图片，缺点是会丢失文字选中一些东西

Answer 3

这个我知道，如果你是在PC环境的话就很好处理，直接后端返回pdf，绝大部分浏览器都支持pdf预览，不支持的也可以弹下载。如果是移动端的话，支持就没那么好了，安卓基本都不支持pdf在线预览，微信、浏览器都不支持。ios部分支持，有些设备只能查看第一页，不能翻页，总的来说，移动端对pdf的支持很差劲，需要做兼容处理，常见的处理方式比如招行APP很多pdf协议都是尝试直接预览，但是提供了一个按钮切换渲染方式。这里的兼容方式就是pdf.js，你可以尝试一下使用pdfjs去打开pdf或者，你可以先用用我的服务，用下面这种方式，在链接中拼接一个file=<pdf路径>，它会使用pdfjs去加载这个pdf文件。如果需要的话，我可以把这个页面发给你。pdf.js官网提供的版本只支持ES6，兼容es5版本的需要在网上找

http://pdfjs.hec9527.top/?file=http://test.hec9527.top/chatai...