前端在線預覽PDF文件三種實現(xiàn)方式(兼容移動端)

更新時間：2025年02月27日 10:45:56 作者：南風同學

這篇文章主要介紹了前端在線預覽PDF文件三種實現(xiàn)方式的相關資料,分別是使用微軟在線預覽地址、直接使用window.open打開文檔鏈接以及使用PDF.js,PDF.js方法穩(wěn)定,適用于大多數(shù)文件,每種方法都給出了詳細的代碼示例,需要的朋友可以參考下

背景

項目中需要在線預覽公司內部的PDF文件，且PC端和移動端均可支持查看

實現(xiàn)方式

一、微軟提供的在線預覽地址結合iframe：

reviewUrl 為需要預覽的 pdf 文件鏈接
這個方式不僅可以預覽 pdf，同時也可以預覽 word、ppt、excel 等文件

<iframe :src="'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(reviewUrl)" frameborder="0" title="review" width="100%" height="100%"></iframe>

缺點：

有一定的概率會出現(xiàn)網(wǎng)絡問題導致無法預覽，需要多次刷新重新打開的問題，體驗較差
在安卓真機設備上會出現(xiàn)打開時直接下載 pdf 文件不能在線預覽的問題，不符合需求

二、直接 window.open 打開文檔鏈接

在 iOS 上表現(xiàn)為可以直接在網(wǎng)頁中打開，但在安卓端也會變成直接下載文檔

三、通過 PDF.js 實現(xiàn)

PDF.js 官網(wǎng)

注意：建議下載低版本，我的是 v2.7.570。版本太高會發(fā)現(xiàn) pdf.js 會報一個版本不匹配的錯誤，不知道是不是我們的pdf文件版本太低的兼容性問題。
我從v4一直試到v3，最后在這個版本才是最穩(wěn)定的，測試了一下98%以上的文件都能預覽

1、首先在官網(wǎng)下載好所需要的文件，主要內容如下：

將 build 和 web 兩個文件夾，整個放到項目中的 public 文件夾下（我的是 Nuxt3 項目，但如果是 Vite 創(chuàng)建的 vue3 項目同樣也是放在 public 文件夾下）

2、新建 Preview.vue 組件，用來預覽 pdf 文件
因為我的需求是打開彈框進行查看，如果你的項目中不是，那么你打開新頁面就行，記得把鏈接帶上。代碼如下：

<template>
  <el-dialog
    title=""
    class="preview-dialog"
   	v-model="dialogVisible"
    :destroy-on-close="true"
    :append-to-body="true"
    :show-close="false"
    @closed="handleClose"
  >
    <div class="close-button" @click.stop="handleClose"></div>
    <iframe frameborder="0" :src="previewUrl" width="100%" height="100%"></iframe>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
interface IProps {
  reviewUrl?: string;
}

const props = withDefaults(defineProps<IProps>(), {
  reviewUrl: "",
});
const emit = defineEmits(["update:modelValue", "emitClosePreview"]);

const dialogVisible = ref(true);
// pdfjs用于預覽的url，固定格式，會去項目中的 public 文件夾下找到 web 文件夾中的 viewer.html
const pdfjsFileUrl = '/web/viewer.html?file=';
const previewUrl = ref("");

const handleClose = () => {
  emit("emitClosePreview");
};

watch(
  () => props.reviewUrl,
  newReviewUrl => {
    // 如果你預覽的是本地的 pdf，那么建議你把 pdf 文件也放到 public 中，這樣不會被編譯 
    previewUrl.value = `${pdfjsFileUrl}${encodeURIComponent(newReviewUrl)}`;
  },
  {
    immediate: true,
  }
);
</script>
// 彈框的樣式我就不貼了

3、在 public/web 下找到 viewer.js 文件，搜索 file origin does not match viewer's，把這一行注釋掉，不然會存在跨域問題

4、在移動端設備上，會發(fā)現(xiàn)預覽時 pdf 整體內容縮放過小，影響閱讀，雖然可以通過手動進行放大，但是這里是可以進行初始設置的。在 viewer.js 文件中，搜索 const DEFAULT_SCALE_VALUE，然后把默認的值修改為 'page-width'，這樣在移動端預覽的時候，就會是最合適設備大小寬度的樣式