【iframe结合pdf.js实现pdf的预览/下载及打印功能】

1.下载pdf.js

2. 将下载好的文件中的build和web拷贝到vue项目的public文件夹下

3. 直接在项目中使用

 <template>
  <div v-dee-loading="loading" class="page-content record-card-preview">
    <!-- 打印预览 -->
    <el-drawer
      title="文件预览"
      :visible.sync="drawer"
      size="70%"
    >
      <div v-dee-loading="loadingPdfUrl" class="scan-file-com">
        <iframe
          v-if="drawer"
          frameborder="0"
          :src="pdfUrl"
          style="height:100%;flex:1;width:-webkit-fill-available;"
        />
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { recordPrint} from '@/api/task.js'
export default {
  name: 'RecordCardPreview',
  components: { },
  data() {
    return {
      loading: false
      // 预览
      loadingPdfUrl: false,
      drawer: false,
      pdfUrl: ''
    }
  },
  created() {
  },
  mounted() {},
  methods: {
   // 此处为上下文调用  代码与本文无关,不重要,已经删掉啦 , 只需要知道在这里调用就可以了 
    tableToolHandler(val) {
      const sels = this.selectionRows
      switch (val.key.btnValue) {
        case 'previewPdf':
          this.previewPdfFun(sels)
          break
        default:
          break
      }
    },
    // 预览pdf
    previewPdfFun(sels) {
      if (sels.length === 1) {
        this.drawer = true
        this.loadingPdfUrl = true
        recordPrint(sels[0].code).then(res => {
          console.log(res)
          if (res.data) {
            this.loadingPdfUrl = false
            /** 
            * 注意这里路径的使用  路径为html的基准路径拼接后台返回来的文档流
            */
            this.pdfUrl = `pdf/web/viewer.html?file=${window.URL.createObjectURL(new Blob([res.data]))}` 
          }
        }).catch(() => {
          this.loadingPdfUrl = false
        })
      } else {
        this.$utils.showMessageWarning('请选择一条数据进行操作！')
      }
    }
  }
}
</script>
<style lang="scss">
</style>

4. 温馨提示:

如果你想做一些修改,比如要不要展示下载,打印按钮之类的, 对public/pdf/web/viewer.html进行适当的修改就可以啦

最终效果