|
|
@@ -0,0 +1,113 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import VuePdfApp from "vue3-pdf-app";
|
|
|
+// import this to use default icons for buttons
|
|
|
+import "vue3-pdf-app/dist/icons/main.css";
|
|
|
+
|
|
|
+const pdfSource = ref("");
|
|
|
+
|
|
|
+const visible = ref(false);
|
|
|
+
|
|
|
+const showPdf = (url) => {
|
|
|
+ localStorage.setItem("pdfjs.history", "");
|
|
|
+
|
|
|
+ visible.value = true;
|
|
|
+ nextTick(() => {
|
|
|
+ pdfSource.value = url;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const onDrawerClose = () => {
|
|
|
+ pdfSource.value = "";
|
|
|
+ // console.log(pdfSource.value, "aaa");
|
|
|
+ // localStorage.setItem("pdfjs.history", "");
|
|
|
+};
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ showPdf,
|
|
|
+});
|
|
|
+
|
|
|
+// 工具栏配置项
|
|
|
+const config = ref({
|
|
|
+ // 右侧其他区工具
|
|
|
+ sidebar: {
|
|
|
+ viewThumbnail: true, //启用缩略图视图
|
|
|
+ viewOutline: true, //启用大纲视图
|
|
|
+ viewAttachments: false, //启用附件视图
|
|
|
+ },
|
|
|
+ secondaryToolbar: {
|
|
|
+ secondaryPresentationMode: true, //启用演示模式
|
|
|
+ secondaryOpenFile: true, //启用打开文件功能
|
|
|
+ secondaryPrint: true, //启用打印功能
|
|
|
+ secondaryDownload: true, //启用下载功能
|
|
|
+ secondaryViewBookmark: true, //启用书签视图
|
|
|
+ firstPage: false, //启用跳转到第一页
|
|
|
+ lastPage: false, //启用跳转到最后一页
|
|
|
+ pageRotateCw: true, //启用顺时针旋转页面
|
|
|
+ pageRotateCcw: true, //启用逆时针旋转页面
|
|
|
+ cursorSelectTool: false, //启用选择工具
|
|
|
+ cursorHandTool: false, //启用手形工具
|
|
|
+ scrollVertical: false, //启用垂直滚动
|
|
|
+ scrollHorizontal: false, //启用水平滚动
|
|
|
+ scrollWrapped: false, //启用包裹滚动
|
|
|
+ spreadNone: false, //启用无跨页模式
|
|
|
+ spreadOdd: false, // 启用奇数页跨页模式
|
|
|
+ spreadEven: false, //启用偶数页跨页模式
|
|
|
+ documentProperties: false, //启用文档属性查看
|
|
|
+ },
|
|
|
+ // 配置左侧工具栏
|
|
|
+ toolbar: {
|
|
|
+ toolbarViewerLeft: {
|
|
|
+ findbar: false, //启用查找条
|
|
|
+ previous: true, // 启用上一页按钮
|
|
|
+ next: true, //启用下一页按钮
|
|
|
+ pageNumber: true, // 启用页码显示
|
|
|
+ },
|
|
|
+ // 配置右侧工具栏
|
|
|
+ toolbarViewerRight: {
|
|
|
+ presentationMode: true, //启用演示模式
|
|
|
+ openFile: false, //启用打开文件功能
|
|
|
+ print: true, //启用打印功能
|
|
|
+ download: true, // 启用下载功能
|
|
|
+ viewBookmark: false, // 启用书签视图
|
|
|
+ },
|
|
|
+ // 配置中间工具栏
|
|
|
+ toolbarViewerMiddle: {
|
|
|
+ zoomOut: true, // 启用缩小功能
|
|
|
+ zoomIn: true, //启用放大功能。
|
|
|
+ scaleSelectContainer: true, //启用缩放选择容器功能
|
|
|
+ },
|
|
|
+ },
|
|
|
+ errorWrapper: true, //启用错误包装，这可能用于显示错误信息或处理错误情况。
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-drawer
|
|
|
+ v-model="visible"
|
|
|
+ :footer="false"
|
|
|
+ :header="false"
|
|
|
+ :show-close="false"
|
|
|
+ destroy-on-close
|
|
|
+ direction="rtl"
|
|
|
+ :append-to-body="true"
|
|
|
+ @closed="onDrawerClose"
|
|
|
+ size="80%"
|
|
|
+ >
|
|
|
+ <VuePdfApp
|
|
|
+ v-if="pdfSource"
|
|
|
+ class="mid-pdf-box"
|
|
|
+ :pdf="pdfSource"
|
|
|
+ page-scale="page-fit"
|
|
|
+ :page-number="1"
|
|
|
+ :config="config"
|
|
|
+ ></VuePdfApp>
|
|
|
+ </el-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.mid-pdf-box {
|
|
|
+ width: 100%;
|
|
|
+ min-height: calc(100vh - 100px);
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
qinhb
