` renderjs` 无法加载使用 `@js-preview/pdf`

[PineSongCN]

发行方式

App

具体平台

Android 15，iOS 18

开发环境

macOS

项目创建方式

HBuilderX

依赖版本

HbuilderX 4.7.6

问题描述

renderjs 无法加载使用 @js-preview/pdf

重现步骤

运行代码报错无法加载

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  async mounted() {},
  async onShow() {},
  methods: {}
};
</script>

<script module="office" lang="renderjs">
export default {
  data() {
    return {
      pdf:'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf',
    };
  },
  mounted() {
      if (typeof window.jsPreviewPdf === 'function') {
        const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('office-preview'), {
            onError: (e)=>{
                console.log('发生错误', e)
            },
            onRendered: ()=>{
                console.log('渲染完成')
            }
        });
        myPdfPreviewer.preview(this.pdf);
    } else {
      // 动态引入较大类库避免影响页面展示
      const script = document.createElement('script')
      // view 层的页面运行在根目录
      // https://501351981.github.io/vue-office/examples/docs/guide/js-preview.html
      script.src = 'static/js/@js-preview/pdf/index.umd.js'
      document.head.appendChild(script)
      console.log(3)
      script.onload = () => {
        console.log(4)
        const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('office-preview'), {
            onError: (e)=>{
                console.log('发生错误', e)
            },
            onRendered: ()=>{
                console.log('渲染完成')
            }
        });
        myPdfPreviewer.preview(this.pdf);
      }
    }

  },
  onunload() {
  },
  methods: {
    emits(key, data){
      this.$ownerInstance.callMethod(key, data);
    },
    initData(data, old, ownerInstance) {
      if (!this.$ownerInstance && ownerInstance) {
        this.$ownerInstance = ownerInstance;
      }
    },
  },
};
</script>

<template>
  <div class="courseware-box">
    <div class="bridge" :data="data" :change:data="office.initData" />
    <div id="office-preview" class="office-preview"></div>
  </div>
</template>

<style lang="scss">
.courseware-box {
  width: 100%;
  height: 700px;
  z-index: 100000;
  position: relative;
  background-color: #fff;
  .bridge {
    position: absolute;
    z-index: -1;
  }
  .vue-office-pdf-wrapper {
    background-color: #fff;
  }
}
</style>

期望行为

正常加载js库，并渲染pdf

实际行为

加载失败
13:35:03.822 Uncaught SyntaxError: Unexpected token '{' at data:text/javascript;base64,dmFyIHQ...省略...YXIoKX19:1
13:35:03.908 发生错误 window.pdfjsLib未找到 at pages/course/detail/components/Courseware/Courseware.vue:28 at uni-app-view.umd.js:7

截图或录屏

13:35:03.822 Uncaught SyntaxError: Unexpected token '{' at data:text/javascript;base64,dmFyIHQ...省略...YXIoKX19:1
13:35:03.908 发生错误 window.pdfjsLib未找到 at pages/course/detail/components/Courseware/Courseware.vue:28 at uni-app-view.umd.js:7