【vue3】实现pdf在线预览的几种方式

今天一天对当前可用的pdf预览插件做了测试，主要需求是只能预览不能下载，但对于前端来说，没有绝对的禁止，这里只罗列实现方式。
目前采用vue3版本为：3.2.37

1. iframe
2. vue-office
3. pdfjs-dist

iframe

先说最简单的，iframe可以直接展示pdf文件，所以如果不作禁止预览等操作，iframe是最合适的。

    <el-dialog
      v-model="previewOtherUpload"
      reset-drag-position
      draggable
      sticky
      :title="_options.imgName || '详情'"
      footer-hide
      class-name="vertical-center-modal"
    >
        <div
          @contextmenu.prevent
          style="user-select: none;"
        >
          <iframe
            ref="iframe"
            :src="`${modelValue}#toolbar=0`"
            width="100%"
            height="600px"
            @load="onIframeLoad"
          >
          </iframe>
        </div>
    </el-dialog>

<script setup>
const modelValue = ref('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf')
let previewOtherUpload = ref(false);
const iframe = ref(null)

const clickShow = () => {
   
	previewOtherUpload.value = true;
}

// 尝试在iframe加载完毕后，进行右键禁用，但实际需要通过postmessage来处理，所以这里无实际用处
const onIframeLoad = () => {
   
  try {