You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.3 KiB
74 lines
2.3 KiB
<template>
|
|
<div id="pdfContainer" ref="pdfContainer" style="width: 100%; height: 100%; overflow: auto;"></div>
|
|
</template>
|
|
|
|
<script >
|
|
import {baseUrl} from "@/config/env";
|
|
import 'core-js/features/promise/with-resolvers';
|
|
import * as pdfjsLib from 'pdfjs-dist';
|
|
const screenWidth = window.innerWidth;
|
|
export default {
|
|
name: 'PdfViewer',
|
|
data() {
|
|
return {
|
|
pageNums: 0,
|
|
// 可引入网络文件或者本地文件
|
|
pdfUrl: "http://192.168.110.36:85/profile/upload/2024/03/29/40eb1a97ca27c3369370e90632d92db0.pdf",
|
|
};
|
|
},
|
|
props: {
|
|
pdfSrc: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
mounted() {
|
|
this.pdfUrl =baseUrl+ this.$route.query.url;
|
|
console.log("pdf地址", this.pdfUrl)
|
|
this.loadPdf();
|
|
},
|
|
methods: {
|
|
async loadPdf() {
|
|
// pdfjsLib.GlobalWorkerOptions.workerSrc = '../../api/pdf.worker.js'
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('../../api/pdf.worker.min.mjs', import.meta.url).href;
|
|
// getDocument 接口可以获取 url 指定的 PDF 文件，并返回一个 PDFDocumentLoadingTask 对象
|
|
const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
|
|
const pdf = await loadingTask.promise;
|
|
this.pageNums = pdf.numPages;
|
|
var pdfContainer = document.getElementById('pdfContainer');
|
|
// 遍历PDF页面并渲染
|
|
for (var i = 1; i <= this.pageNums; i++) {
|
|
pdf.getPage(i).then(async function (page) {
|
|
var scale = 1;
|
|
var viewport = page.getViewport({scale: scale});
|
|
var canvas = document.createElement('canvas');
|
|
var context = canvas.getContext('2d');
|
|
canvas.height = viewport.height;
|
|
canvas.width = viewport.width;
|
|
var scale1 = screenWidth / viewport.width; // 根据屏幕宽度调整 scale
|
|
var adjustedViewport = page.getViewport({scale: scale1});
|
|
|
|
// 将canvas添加到容器中
|
|
pdfContainer.appendChild(canvas);
|
|
|
|
// 渲染PDF页面到canvas上
|
|
var renderContext = {
|
|
canvasContext: context,
|
|
viewport: adjustedViewport
|
|
};
|
|
page.render(renderContext);
|
|
});
|
|
}
|
|
},
|
|
withResolvers() {
|
|
let resolve, reject;
|
|
const promise = new Promise((res, rej) => {
|
|
resolve = res;
|
|
reject = rej;
|
|
});
|
|
return { promise, resolve, reject };
|
|
}
|
|
|
|
},
|
|
};
|
|
</script>
|