团队作业（8）

完成pdf的展示

  1 <template>
  2   <div>
  3     <div class="pdfArea">
  4       <pdf
  5         ref="pdf"
  6         :src="url"
  7         :page="pageNum"
  8         :rotate="pageRotate"
  9         @progress="loadedRatio = $event"
 10         @page-loaded="pageLoaded($event)"
 11         @num-pages="pageTotalNum = $event"
 12         @error="pdfError($event)"
 13         @link-clicked="page = $event"
 14       >
 15       </pdf>
 16     </div>
 17      <div>
 18       <el-row>
 19         <el-col :span="16" :offset="4">
 20           <el-pagination
 21             @size-change="handleSizeChange"
 22             @current-change="handleCurrentChange"
 23             :current-page="currentPage"
 24             :page-sizes="[10, 20, 50, 100]"
 25             :page-size="pageSize"
 26             :total="total"
 27             layout="total, prev, pager, next, jumper"
 28           >
 29           </el-pagination>
 30         </el-col>
 31       </el-row>
 32       <el-button
 33         style="border-radius: 200px; margin-top: 5px; margin-left: 0px"
 34         :theme="'default'"
 35         type="submit"
 36         :title="'基础按钮'"
 37         @click.stop="clock">
 38         顺时针旋转
 39         </el-button>
 40       <el-button
 41       style="border-radius: 200px; margin-top: 5px; margin-left: 5px" 
 42         :theme="'default'"
 43         type="submit"
 44         :title="'基础按钮'"
 45         @click.stop="counterClock"
 46         class="mr10"> 
 47         逆时针旋转
 48         </el-button>
 49     </div>
 50     <br/>
 51     <br/>
 52     <br/>
 53   </div>
 54 </template>
 55 
 56 <script>
 57 import pdf from "vue-pdf";
 58 export default {
 59   name: "Home",
 60   components: {
 61     pdf,
 62   },
 63   data() {
 64     return {
 65       url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
 66       pageNum: 1,
 67       pageTotalNum: 1,
 68       pageRotate: 0,
 69       // 加载进度
 70       loadedRatio: 0,
 71       curPageNum: 0,
 72 
 73       currentPage: 1, // 初始页码
 74       pageSize: 1, // 每页的数据
 75       total: this.pageTotalNum, // 总记录数
 76     };
 77   },
 78   mounted: function () {},
 79   methods: {
 80     handleSizeChange: function (size) {
 81       this.pageSize = size;
 82       console.log("每页大小:" + this.pageSize); //每页下拉显示数据
 83     },
 84     // 页码变更处理函数
 85     handleCurrentChange: function (page) {
 86       this.pageNum = page;
 87       console.log("当前页码:" + this.pageNum); //点击第几页
 88     },
 89 
 90     // // 上一页函数，
 91     // prePage() {
 92     //   var page = this.pageNum;
 93     //   page = page > 1 ? page - 1 : this.pageTotalNum;
 94     //   this.pageNum = page;
 95     // },
 96     // // 下一页函数
 97     // nextPage() {
 98     //   var page = this.pageNum;
 99     //   page = page < this.pageTotalNum ? page + 1 : 1;
100     //   this.pageNum = page;
101     // },
102     // 页面顺时针翻转90度。
103     clock() {
104       this.pageRotate += 90;
105     },
106     // 页面逆时针翻转90度。
107     counterClock() {
108       this.pageRotate -= 90;
109     },
110     // 页面加载回调函数，其中e为当前页数
111     pageLoaded(e) {
112       this.curPageNum = e;
113     },
114     // 其他的一些回调函数。
115     pdfError(error) {
116       console.error(error);
117     },
118   },
119 };
120 </script>
121 
122 <style scoped>
123 .pdfArea {
124   width: 900px;
125   margin: 0 auto;
126 }
127 
128 </style>

 

posted @ 2023-04-04 20:25  旺旺大菠萝  阅读(32)  评论(0)  编辑  收藏  举报