如何在Svelte组件中添加PDF？iframe失效求其他替代方案

先说说你用iframe失效的常见原因，大概率是配置或路径问题，先排查下：

• 路径错误：Svelte项目的静态资源要放在static目录下，所以你的PDF路径应该写成/stadgar.pdf（根路径），而不是./stadgar.pdf（相对当前组件的路径）
• 静态资源未被正确识别：如果是Vite搭建的项目，只要文件在static里就会被正确打包，不需要额外配置
• 浏览器限制：部分浏览器可能禁用了内置PDF阅读器，导致iframe无法渲染，可以换个浏览器试试

如果确认iframe确实用不了，还有这些替代方案：

1. 使用<object>标签 #

兼容性不错，还能添加降级提示：

<object data="/stadgar.pdf" type="application/pdf" width="500" height="1000">
  你的浏览器不支持PDF预览，请<a href="/stadgar.pdf">点击下载</a>
</object>

2. 使用<embed>标签 #

轻量的嵌入方式，语法更简洁：

<embed src="/stadgar.pdf" type="application/pdf" width="500" height="1000">

3. 直接提供链接 #

如果不需要内嵌预览，直接让用户打开或下载更简单：

<!-- 在新标签页打开PDF -->
<a href="/stadgar.pdf" target="_blank">查看PDF文件</a>
<!-- 强制下载PDF -->
<a href="/stadgar.pdf" download="stadgar.pdf">下载PDF文件</a>

4. 原生PDF.js自定义渲染 #

如果需要自定义预览功能（比如分页、缩放），可以直接用PDF.js，不用装第三方封装包：

1. 把PDF.js的预构建文件（包括pdf.min.js和pdf.worker.min.js）放到项目的static目录下
2. 在Svelte组件中初始化渲染：

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    // 引入PDF.js
    const pdfjsLib = await import('/pdf.min.js');
    // 指定worker路径
    pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js';

    // 加载PDF
    const pdf = await pdfjsLib.getDocument('/stadgar.pdf').promise;
    // 获取第一页
    const page = await pdf.getPage(1);
    // 设置渲染视口
    const viewport = page.getViewport({ scale: 1.2 });
    const canvas = document.getElementById('pdf-preview');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // 渲染到canvas
    await page.render({
      canvasContext: canvas.getContext('2d'),
      viewport
    }).promise;
  });
</script>

<canvas id="pdf-preview"></canvas>

内容的提问来源于stack exchange，提问作者Lukas Hagberg