vue3 vite2 预览pdf

vue3 + ts + vite2 预览pdf展示

调用后端接口 返回 附件文件流
接口请求 请求体中添加 responseType: ‘blob’,
接口返回
返回的blob 通过

 const blob = new Blob([res.data]); //1.创建一个blob
 const link = document.createElement('a'); //2.创建一个a链接
 link.download = val.fileName; //3.设置名称

 link.style.display = 'none'; // 4.默认不显示
 link.href = URL.createObjectURL(blob); // 5.设置a链接href
 document.body.appendChild(link);
 // 如果是 window 操作的话 直接可以通过 window.open(document.body.appendChild(link)) 打开pdf

h5 尤其是内置浏览器（钉钉/微信）点击链接打开的 open 不生效

h5操作步骤

安装 “pdfh5”: “1.3.20”,
npm install pdfh5 --save
组件封装并引入pdfh5

<!-- BasePdfView.vue -->
<template>
  <div id="pdf-view">
    <div id="pdf"></div>
  </div>
</template>
<script>
import Pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css';
import { reactive, toRefs, onMounted, onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
export default {
  name: 'PdfView',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      pdfh5: null,
    });
    onMounted(() => {
      state.pdfh5 = new Pdfh5('#pdf', {
        pdfurl: route.query.url,
      });
      state.pdfh5.on('complete', function (status, msg, time) {
        console.log('状态：' + status + '，信息：' + msg + '，耗时：' + time + '毫秒，总页数：' + this.totalNum);
      });
      state.pdfh5.on('error', (msg, time) => {
        // console.log('pdf加载失败', '信息：', msg, ', 耗时：', time, '毫秒');
        router.back();
      });
    });

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
#pdf-view {
  height: 100%;
  #pdf {
    height: 100%;
    :deep(.pinch-zoom-container) {
      height: 100% !important;
    }
  }
  :deep(.pdfViewer) {
    padding: 0;
  }
}
</style>

h5调用组件 或 router 跳转 新的页面去展示

// 这里使用 router
  let url = window.URL.createObjectURL(new Blob([res.data]));

      const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
      const flieArr = val.fileName.split('.');
      let suffix = flieArr[flieArr.length - 1];

      // 进行图片匹配
      let result = imglist.find((item) => item === suffix);
      if (result) {
        state.imgUrl = url;
        state.imgShow = true;
      } else {
        if (url != null && url != undefined && url) {
          router.push({ path: '/preview', query: { url: url } });
        }
      }

如果有空白页面 或者有图字体不展示 可能是版本问题
我使用的 是 “pdfh5”: “1.3.20”,
(end)