|
|
@@ -2,12 +2,13 @@
|
|
|
|
|
|
<div ref="container"></div>
|
|
|
<h1>查看PDF文件</h1>
|
|
|
- <canvas ref="renderContext"></canvas>
|
|
|
+ <canvas class="pdf-canvas" ref="renderContext"></canvas>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { ref,onMounted } from "vue";
|
|
|
import * as PDFJS from "pdfjs-dist/legacy/build/pdf"; // 引入PDFJS
|
|
|
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址
|
|
|
+import 'pdfjs-dist/web/pdf_viewer.css'
|
|
|
|
|
|
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址
|
|
|
|
|
|
@@ -59,8 +60,8 @@ function showPdf(pdfDoc,pageNum) {
|
|
|
const viewport = page.getViewport({ scale: 1 });
|
|
|
canvas.width = viewport.width * ratio;
|
|
|
canvas.height = viewport.height * ratio;
|
|
|
- canvas.style.width = viewport.width + "px";
|
|
|
- canvas.style.height = viewport.height + "px";
|
|
|
+ // canvas.style.width = viewport.width + "px";
|
|
|
+ // canvas.style.height = viewport.height + "px";
|
|
|
ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
|
|
|
const context = {
|
|
|
canvasContext: ctx,
|
|
|
@@ -71,6 +72,13 @@ function showPdf(pdfDoc,pageNum) {
|
|
|
});
|
|
|
}
|
|
|
onMounted(()=>{
|
|
|
- getPdf('./web/compressed.tracemonkey-pldi-09.pdf', 1);
|
|
|
+ getPdf('./web/科目一标识.pdf', 1);
|
|
|
})
|
|
|
</script>
|
|
|
+<style scoped>
|
|
|
+.pdf-canvas{
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
