钉钉中预览打印PDF问题（无法使用blob地址）

使用pdfjs-dist预览文件

依赖

npm install [email protected]

组件

<template>
  <div id="pageContainer">
    <div id="viewer">div>
  div>
template>

<script>
import 'pdfjs-dist/web/pdf_viewer.css';
import * as pdfjsLib from 'pdfjs-dist';
import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
import 'pdfjs-dist/build/pdf.worker.entry';
import * as pdfjsSandbox from 'pdfjs-dist/build/pdf.sandbox.js';

pdfjsLib.GlobalWorkerOptions.workerSrc = window.pdfjsWorker;

export default {
  name: 'PdfViewer',
  props: {
    pdfBlob: {
      type: Blob,
      required: true
    }
  },
  components: {},
  methods: {
    blobToArrayBuffer(blob) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsArrayBuffer(blob);
      });
    }
  },
  async mounted() {
    if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
      alert(
        'Please build the pdfjs-dist library using\n  `gulp dist-install`'
      );
    }
    const CMAP_URL = './cmaps/';
    const CMAP_PACKED = true;
    const ENABLE_XFA = true;
    const SEARCH_FOR = '';
    const SANDBOX_BUNDLE_SRC = pdfjsSandbox;
    const container = document.getElementById('pageContainer');
    const eventBus = new pdfjsViewer.EventBus();
    const pdfLinkService = new pdfjsViewer.PDFLinkService({
      eventBus
    });
    const pdfFindController = new pdfjsViewer.PDFFindController({
      eventBus,
      linkService: pdfLinkService
    });
    const pdfScriptingManager = new pdfjsViewer.PDFScriptingManager({
      eventBus,
      sandboxBundleSrc: SANDBOX_BUNDLE_SRC
    });
    const pdfViewer = new pdfjsViewer.PDFViewer({
      container,
      eventBus,
      linkService: pdfLinkService,
      findController: pdfFindController,
      scriptingManager: pdfScriptingManager,
      enableScripting: true
    });
    pdfLinkService.setViewer(pdfViewer);
    pdfScriptingManager.setViewer(pdfViewer);

    eventBus.on('pagesinit', function() {
      pdfViewer.currentScaleValue = '1.5';
      if (SEARCH_FOR) {
        eventBus.dispatch('find', { type: '', query: SEARCH_FOR });
      }
    });

    const arrayBuffer = await this.blobToArrayBuffer(this.pdfBlob);
    const loadingTask = pdfjsLib.getDocument({
      data: arrayBuffer,
      cMapUrl: CMAP_URL,
      cMapPacked: CMAP_PACKED,
      enableXfa: ENABLE_XFA
    });
    const pdfDocument = await loadingTask.promise;
    pdfViewer.setDocument(pdfDocument);
    pdfLinkService.setDocument(pdfDocument, null);
  }
};
script>

<style>
#pageContainer {
  position: absolute;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
#pageContainer .page {
  display: inline-block;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 2px;
}
#pageContainer #viewer .page {
  width: auto !important;
}
#pageContainer #viewer .page .canvasWrapper {
  width: auto !important;
}
#pageContainer #viewer .page .textLayer {
  width: auto !important;
}
#pageContainer #viewer .page .annotationLayer {
  width: auto !important;
}
style>

打印

npm install [email protected]

<template>
	<div id="printDiv">
	  <div v-if="fileType === 'application/pdf'">
	    <PdfViewer :pdfBlob="previewUrl"/>
	  div>
	  <div style="text-align: center;" v-else >
	    <img :src="previewUrl" />
	  div>
	div>
	<a-button type="primary" v-print="printMe">打印a-button>
template>

<script>
import PdfViewer from './PdfViewer.vue';
import Print from 'vue-print-nb';
import * as dd from 'dingtalk-jsapi';

export default {
  name: 'Preview', // 预览
  components: { PdfViewer },
  directives: { Print },
  data() {
    return {
      previewUrl: '',
      printMe: {
        // 打印区域
        id: 'printDiv',
        // 是否有打印预览
        preview: false
      },
      fileType: ''
    };
  }
}
script>