您的当前位置:首页正文

uniapp+vue3----微信小程序点击预览文档,pdf封装方法

2024-11-30 来源:个人技术集锦

uniapp+vue3----微信小程序点击预览文档,pdf封装方法

1.在hook文件夹中新建openDocument.ts文件

/**
 * @description:
 * @param {string} url:文件路径
 * @param {string} fileType:文件后缀名
 * @return {*}
 */

export default function openDocument(contractUrl: string, fileType?: string | 'pdf') {
    if (!contractUrl) return uni.$u.toast('文档地址为空')
    uni.downloadFile({
        url: contractUrl,
        success: function (res) {
            const filePath = res.tempFilePath
            uni.openDocument({
                filePath: filePath,
                fileType: fileType,
                success: function (res) {
                    console.log('打开文档成功')
                    return res
                }
            })
        }
    })
}

2.在需要用的页面中进行调用

<script setup lang="ts">
	import openDocument from '@/hooks/openDocument'
	/**
	 * @description: 点击打开文档
	 * @param {*} url:文档地址
	 * @return {*}
	 */
	const handleHerf = (url: string) => {
	    openDocument(url)
	}
</script>
显示全文