แก้ไข pdf

This commit is contained in:
Thanit Konmek 2023-07-03 17:21:04 +07:00
parent dc5ea784a3
commit 17782c32b8
4 changed files with 41 additions and 32 deletions

View file

@ -83,13 +83,8 @@
</q-btn>
</div>
<div class="pdfWidth">
<!-- <VuePDF
ref="vuePDFRef"
:pdf="pdfData"
:page="page"
fit-parent
/> -->
<VuePdf :key="page" :src="pdfSrc" :page="page" />
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div
class="justify-between items-center align-center q-py-sm row"
@ -198,27 +193,42 @@
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
// import { VuePDF, usePDF } from "@tato30/vue-pdf";
// import type { PDFDocumentLoadingTask } from "@tato30/vue-pdf";
import { VuePdf, createLoadingTask } from "vue3-pdfjs/esm";
import { VuePdfPropsType } from "vue3-pdfjs/components/vue-pdf/vue-pdf-props"; // Prop type definitions can also be imported
import { PDFDocumentProxy } from "pdfjs-dist/types/src/display/api";
import { ref, onMounted, onUnmounted } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
import type { QForm } from "quasar";
onMounted(() => {
const loadingTask = createLoadingTask(pdfSrc.value);
loadingTask.promise.then((pdf: PDFDocumentProxy) => {
numOfPages.value = pdf.numPages;
onUnmounted(() => {
window.removeEventListener("resize", (e: any) => {
myEventHandler(e);
});
});
const pdfSrc = ref<VuePdfPropsType["src"]>(
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
);
const numOfPages = ref<number>(0);
onMounted(async () => {
window.addEventListener("resize", (e: any) => {
myEventHandler(e);
});
const pdfData = usePDF(
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
);
console.log("pdfData.pages.value", pdfData);
console.log("pdfData.pages.value", pdfData.pages);
console.log("pdfData.pages.value", pdfData.pages.value);
});
const myEventHandler = (e: any) => {
console.log("e", e.target.innerWidth);
// if (vuePDFRef !== null) {
// vuePDFRef.value.reload();
// }
};
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const vuePDFRef = ref<any>(null);
const myForm = ref<QForm | null>(null);
@ -242,7 +252,10 @@ const fileOrder = ref<any>(null);
const fileTailer = ref<any>(null);
const onchangePage = (val: any) => {
console.log(val);
// console.log(val);
if (vuePDFRef !== null) {
vuePDFRef.value.reload();
}
};
const save = () => {