前端在线预览PDF文件三种实现方式(兼容移动端)

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

<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>
// 弹框的样式我就不贴了