Vue怎么使用vue-pdf实现PDF文件预览

先看下效果 

安装

npm install vue-pdf

页面按需引入并注册

import Pdf from "vue-pdf"
export default {
  components: { Pdf }
}

完整代码

.global {
  width: 100%;
  height: 100%;
}
.preview {
  width: 100%;
  height: 50px;
}
 
.pdfContainer {
  width: 100%;
  height: calc(100% - 50px);
}
.pdfContainer .button {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
.pdfContainer .pdf {
  width: 100%;
  height: calc(100% - 100px);
  overflow-y: auto;
}
.pdfContainer .page {
  width: 100%;
  height: 50px;
}
 
.pageNum {
  font-size: 28px;
}