[pdf] 插件實現pdf上傳預覽、打印

[vue-pdf] npm連接:https://www.npmjs.com/package/vue-pdf

安裝vue-pdf

npm i vue-pdf

1.解決字體問題

　　將node_modules/pdfjs-dist/cmaps文件夾復制到public文件夾下 (找不到的可以看下代碼怎么寫的，node_modules/vue-pdf/src/CMapReaderFactory.js)

2.上傳預覽

<template>
  <div>
    <el-upload
      class="upload-demo" drag action="#" 
      :auto-upload="false"
      :on-change='fileChange'
      :limit='1'
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
      <div class="el-upload__tip" slot="tip">
        只能上傳jpg/png文件，且不超過500kb
      </div>
    </el-upload>
    <pdf  :src="pdfURL"></pdf>
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfURL: "",
    };
  },
  methods: {
    fileChange(file){
　　　 //拿到上傳的文件
      let file=file.raw
　　　 //轉成二進制
      let blob=new Blob([file])
　　　 //本地創建新的連接地址
      this.pdfURL=URL.createObjectURL(blob)
　　　 //解決字體問題、第二次加載字體不顯示問題
      this.pdfURL= pdf.createLoadingTask({ 
      url: this.pdfURL , 
      cMapUrl: '/cmaps/',
      cMapPacked: true})
    }
  },
};
</script>

2. 下載預覽

3.打印

4.下載

 

有空更新