<!--
|
* @Author: 小明丶
|
* @Date: 2020-07-01 19:52:15
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-06-16 16:42:41
|
* @Description:
|
-->
|
<template>
|
<div class="cpdf" id="cpdf">
|
<div class="center">
|
<!-- <div class="contor">
|
<button @click="prev">上一页</button>
|
<button @click="next">下一页</button>
|
<span>Page: <span v-text="page_num"></span> / <span v-text="page_count"></span></span>
|
|
<button @click="addscale" >加</button>
|
<button @click="minus" >减</button>
|
<button id="prev" @click="closepdf">关闭</button>
|
</div> -->
|
<!-- <canvas class="canvasstyle" id="the-canvas"></canvas> -->
|
<canvas id="the-canvas" style="border:1px solid black"></canvas>
|
</div>
|
</div>
|
</template>
|
<script>
|
// import PDFJS from "pdfjs-dist";
|
// import { TextLayerBuilder } from "pdfjs-dist/web/pdf_viewer";
|
// import "pdfjs-dist/web/pdf_viewer.css";
|
// PDFJS.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.js";
|
|
var container;
|
export default {
|
name: "c-pdf",
|
props: {
|
msg: String
|
},
|
mounted() {
|
// this.$nextTick(() => {
|
// let url =
|
// "http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";
|
// this.getPDF(url);
|
// });
|
},
|
methods: {
|
async getPDF(url) {
|
let pdf = await PDFJS.getDocument(url)
|
container = container || document.querySelector('#container')
|
for(let i = 0; i < pdf.numPages; i++) {
|
try{
|
await this.rendPDF(pdf, i)
|
} catch(e) {
|
// console.error(e)
|
}
|
}
|
},
|
// async renderPDF(pdf, num) {
|
// let page = await pdf.getPage(num)
|
// // 设置展示比例
|
// let scale = 1.5;
|
// let viewport = page.getViewport(scale);
|
|
// let pageDiv = document.createElement('div');
|
// pageDiv.setAttribute('id', 'page-' + (page.pageIndex + 1));
|
// pageDiv.setAttribute('style', 'position: relative');
|
// container.appendChild(pageDiv);
|
|
// let canvas = document.createElement('canvas');
|
// pageDiv.appendChild(canvas);
|
// let context = canvas.getContext('2d');
|
// canvas.height = viewport.height;
|
// canvas.width = viewport.width;
|
|
// let renderContext = {
|
// canvasContext: context,
|
// viewport: viewport
|
// };
|
|
// await page.render(renderContext);
|
// let textContent = await page.getTextContent()
|
// // 创建文本图层div
|
// const textLayerDiv = document.createElement('div');
|
// textLayerDiv.setAttribute('class', 'textLayer');
|
// textLayerDiv.setAttribute('style', `width: ${viewport.width}px; margin: 0 auto;`)
|
// // 将文本图层div添加至每页pdf的div中
|
// pageDiv.appendChild(textLayerDiv);
|
|
// // 创建新的TextLayerBuilder实例
|
// var textLayer = new TextLayerBuilder({
|
// textLayerDiv: textLayerDiv,
|
// pageIndex: page.pageIndex,
|
// viewport: viewport
|
// });
|
|
// textLayer.setTextContent(textContent);
|
|
// textLayer.render();
|
|
// }
|
}
|
};
|
|
</script>
|
<style type="text/less" lang="less" rel="stylesheet/less">
|
.cpdf {
|
position: fixed;
|
top: 0;
|
left: 0;
|
background-color: rgba(0, 0, 0, .5);
|
width: 100%;
|
height: 100%;
|
z-index: 99999;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.center {
|
text-align: center;
|
height: 100%;
|
overflow: auto;
|
padding-top: 20px;
|
.contor {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
</style>
|
