pdf.js用iframe方式时不能全屏的处理方法

àì夳堔傛蜴生んèń 2022-04-13 13:09 1546阅读 0赞

引入pdf.js，调用时改变iframe的src

全屏方案viewer.js

// iframe会没有全屏，所以隐藏
      // if (!PDFViewerApplication.supportsFullscreen) {
      //   appConfig.toolbar.presentationModeButton.classList.add('hidden');
      //   appConfig.secondaryToolbar.presentationModeButton.classList.add('hidden');
      // }

iframe写法：  
`<iframe ms-if="@courseType === 2 && @hasCourse" id="iframepage" ms-attr="{src: @pdfUrl}" width="100%" height="100%" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>`  
pdf.js/viewer.js自身全屏方法即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piZ3Vv_size_16_color_FFFFFF_t_70]  
我添加的，执行不影响，做下备份，之所以不会全屏是因为代码有错误提交到开发分支，导致打包失败

隐藏下载按钮

// 隐藏下载按钮
    // items.download.addEventListener('click', function () {
    //   eventBus.dispatch('download');
    //  });

跨域支持

// 为了支持跨域，注释此段代码
    // if (fileOrigin !== viewerOrigin) {
    //   throw new Error('file origin does not match viewer\'s');
    // }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piZ3Vv_size_16_color_FFFFFF_t_70]: /images/20220413/1a56fe2600bc4cd5be233bbba5fbebb5.png