快捷導(dǎo)航

前端在線預(yù)覽PDF文件三種實(shí)現(xiàn)方式(兼容移動(dòng)端)

更新時(shí)間：2025年02月27日 10:45:56 作者：南風(fēng)同學(xué)

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

背景

項(xiàng)目中需要在線預(yù)覽公司內(nèi)部的PDF文件，且PC端和移動(dòng)端均可支持查看

實(shí)現(xiàn)方式

一、微軟提供的在線預(yù)覽地址結(jié)合iframe：

reviewUrl 為需要預(yù)覽的 pdf 文件鏈接
這個(gè)方式不僅可以預(yù)覽 pdf，同時(shí)也可以預(yù)覽 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>

缺點(diǎn)：

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

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

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

三、通過(guò) PDF.js 實(shí)現(xiàn)

PDF.js 官網(wǎng)

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

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

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

2、新建 Preview.vue 組件，用來(lái)預(yù)覽 pdf 文件
因?yàn)槲业男枨笫谴蜷_彈框進(jìn)行查看，如果你的項(xiàng)目中不是，那么你打開新頁(yè)面就行，記得把鏈接帶上。代碼如下：

<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用于預(yù)覽的url，固定格式，會(huì)去項(xiàng)目中的 public 文件夾下找到 web 文件夾中的 viewer.html
const pdfjsFileUrl = '/web/viewer.html?file=';
const previewUrl = ref("");

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

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

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

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