import pdf from 'vue-pdf'
  export default {components: {pdf},
    data () {
      return {
        currentPage: 0, // pdf 文件页码
        pageCount: 0, // pdf 文件总页数
        fileType: 'pdf', // 文件类型
　　　　　src: '', // pdf 文件地址

      }
    },
　　created: {
　　　　// 有时 PDF 文件地址会出现跨域的情况, 这里最好处理一下
　　　　this.src = pdf.createLoadingTask(this.src)

　　}
    method: {
      // 改变 PDF 页码,val 传过来区分上一页下一页的值,0 上一页,1 下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
  </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> pdf加载时</span>

      loadPdfHandler (e) {
this.currentPage = 1 // 加载的时候先加载第一页
      }
}

}
</script>

<el-dialog
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          :fullscreen="true"
          title="文件预览">
          <div class="agreement_picture">
            <div class="pdf">
              <!-- <pdf // 之前的用 PDF 插件的方法
                v-for="i in pdf.numPages"
                :key="i"
                :page="i"
                :src="src">
              </pdf> -->
              // 使用 iframe 方法
              <iframe :src="src" frameborder="0" style="width: 100%; height: 100%"></iframe>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <div class="tip-left transfer">
                <el-button type="info" @click="dialogVisible=false"> 不同意 </el-button>
              <el-button type="danger" @click="agreeSignFun"> 同意 </el-button>
            </div>
          </span>
        </el-dialog>    

  data () {
    return {
      src: '/static/file/ 中国互联网整体网民发展状况——《第 31 次中国互联网发展状况调查报告 (上)》.pdf', //pdf 地址, 这里我用的是我本地的文件, 你也可以使用后台的文件

      dialogVisible: true
    }
  }

<el-dialog
      title="文件预览"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div ref="printContent">
        <!-- 加载全部页面的 PDF 是循环生成, 不能指定 ref, 不能调用 print 打印方法 -->
        <Pdf
          v-for="i in numPages"
          :key="i"
          :src="src"
          :page="i"
        />
        <!-- 写一个隐藏的 PDF, 用来调用打印 -->
        <Pdf
          v-show="false"
          ref="printPdf"
          :src="src"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="print">vue-pdf 自带打印 </el-button>
        <el-button type="primary" @click="toImg"> 转图片打印 </el-button>
      </span>
    </el-dialog>

<script>
import Pdf from 'vue-pdf'
import html2canvas from 'html2canvas'
import printJS from 'print-js'
export default {
components: {
Pdf
},
data() {
return {
fileList: [
{
id: 1,
fileName: '增进函',
fileUrl: 'http://172.16.79.33:8888/group1/.........../rBBPIV7whg2AQNCmAAoc6DKtkwE841.pdf'
},
{
id: 2,
fileName: '应收账款',
fileUrl: ${window.location.origin}</span>/test1.pdf
        }
],
numPages: undefined,
dialogVisible: false,
src: '',
printName: '转图片打印'
}
},
created() {
},
methods: {
// 预览
    preview(item) {
this.src = Pdf.createLoadingTask(item.fileUrl)
this.src.promise.then(pdf => {
this.numPages = pdf.numPages
})
this.dialogVisible = true
this.printName = item.fileName
},
// 转图片打印
    toImg() {
      html2canvas(this.$refs.printContent, {
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight
}).then((canvas) => {
const url = canvas.toDataURL()
printJS({
printable: url,
type: 'image',
documentTitle: this.printName
})
// console.log(url)
      })
},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> pdf自带打印</span>

    print() {
this.$refs.printPdf.print()
}
}
}