vue 文档.PDF无法预览解决方法

最新推荐文章于 2024-09-13 21:35:36 发布

与太

最新推荐文章于 2024-09-13 21:35:36 发布

阅读量2.3k

点赞数 3

分类专栏：我的第一个vue

本文链接：https://blog.csdn.net/thewebguy/article/details/118996176

版权

前端开发 PDF预览文件格式问题解决代码实现

关键词由CSDN通过智能技术生成

我的第一个vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在预览的时候，.pdf文件可以正常预览，但是.PDF就无法预览，后来找到了解决方法，将文件格式小写后判断是不是.pdf，如果是就正常预览，方法很简单，代码如下：

    // 文档预览
    handleDocView(docInfo) {
      console.log('docInfo is :', docInfo)
      switch (docInfo.resourceType) {
        case 'application/pdf':
          this.currentPdfViewUrl = './pdfjs/web/viewer.html?file=' + encodeURIComponent(docInfo.resourceUrl)
          console.log('this.currentPdfViewUrl is', this.currentPdfViewUrl)
          this.pdfViewerDrawerDisplay = true
          break
        // case 'image/jpg':
        //   this.currentPdfViewUrl = './img-view.html?file=' + encodeURIComponent(docInfo.resourceUrl)
        //   console.log('this.currentJpgViewUrl is', this.currentPdfViewUrl)
        //   this.pdfViewerDrawerDisplay = true
        //   break
        default:
        // 取文件的后缀名，小写后进行比较
            console.log('docInfo.name.substring(docInfo.name.length - 3).toLowerCase:', docInfo.name.substring(docInfo.name.length - 3).toLowerCase())
          if (docInfo.name.substring(docInfo.name.length - 3).toLowerCase() === 'pdf') {         
            console.log('this.currentPdfViewUrl is', this.currentPdfViewUrl)
            this.currentPdfViewUrl = './pdfjs/web/viewer.html?file=' + encodeURIComponent(docInfo.resourceUrl)
            this.pdfViewerDrawerDisplay = true
            break
          }
          this.$refs[docInfo.id].value = true
          setTimeout(_ => {
            this.$refs[docInfo.id].value = false
          }, 3000)
          break
      }
    }

这里是前端小白，如有不对请指正！