vue3使用vue3-pdf-app预览pdf文档-尧图网站建设

引入第三方组件库

npm i vue3-pdf-app@1.0.3

vue3 创建组件

<template><VuePdfApp :style="`width: ${viewerWidth}; height: ${viewerHeight};`":pdf="src" @pages-rendered="pagesRendered"  :config="config"></VuePdfApp>
</template><script setup>import { computed, ref,defineProps,defineEmits} from 'vue'import VuePdfApp from 'vue3-pdf-app'import 'vue3-pdf-app/dist/icons/main.css'defineProps({src:{type:String,default:()=>{return ""}},viewerWidth:{type:String,},viewerHeight:{type:String,},})// // 工具栏配置项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: false,//启用演示模式openFile: false,//启用打开文件功能print: false,//启用打印功能download: false,// 启用下载功能viewBookmark: false,// 启用书签视图
            },// 配置中间工具栏
            toolbarViewerMiddle: {zoomOut: true,// 启用缩小功能zoomIn: true,//启用放大功能。scaleSelectContainer: false,//启用缩放选择容器功能
            },},//启用错误包装，这可能用于显示错误信息或处理错误情况。errorWrapper: true,})const emit = defineEmits(['loaded'])function pagesRendered(pdfApp) {console.log('pdfApp页码渲染完成:', pdfApp)// emit('loaded', pdfApp)
    }
</script><style lang="less" scoped></style>

资讯详情

vue3使用vue3-pdf-app预览pdf文档