แก้ไข pdf
This commit is contained in:
parent
dc5ea784a3
commit
17782c32b8
4 changed files with 41 additions and 32 deletions
|
|
@ -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 = () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue