PDF预览组件在移动端显示空白怎么办？

程序猿心霞提问于 2026-03-23 06:28:18 阅读 13

组件

我在项目里用了一个PDF预览组件，PC上正常，但一到手机浏览器就整个区域变空白，控制台也没报错。试过用iframe和embed都一样，是不是移动端不支持直接渲染PDF啊？

这是我现在用的代码：

<div style="width: 100%; height: 600px;">
  <embed
    src="/docs/report.pdf"
    type="application/pdf"
    width="100%"
    height="100%"
  />
</div>

我来解答赞 3 收藏

反馈

1 条解答

端木爱香 Lv1

移动端浏览器对PDF的支持不如桌面版，试试用PDF.js来渲染。引入PDF.js库后，用它的API加载PDF文件。

const url = '/docs/report.pdf';

PDFJS.getDocument(url).promise.then(function(pdf) {

  pdf.getPage(1).then(function(page) {

    const viewport = page.getViewport({ scale: 1.5 });

    const canvas = document.createElement('canvas');

    const context = canvas.getContext('2d');

    canvas.height = viewport.height;

    canvas.width = viewport.width;

    const renderContext = { canvasContext: context, viewport: viewport };

    page.render(renderContext);

    document.body.appendChild(canvas);

  });

});

就这样

2026-03-23 07:02