关于vue-office-pdf预览pdf文件无法使用相对路径打开问题的解决以及正确的打开方式。

最新推荐文章于 2024-07-02 17:05:26 发布

qq_19592133

最新推荐文章于 2024-07-02 17:05:26 发布

阅读量821

点赞数 2

文章标签： vue.js pdf 前端

本文链接：https://blog.csdn.net/qq_19592133/article/details/136315181

版权

文章讲述了在使用Vue3的setup语法和uni-app开发时，如何解决在小程序中vue-office-pdf组件由于相对路径问题导致无法正常显示文档的问题，通过调整`src`属性的引用方式解决了该问题。

摘要由CSDN通过智能技术生成

之前的写法,在nginx发布是正常使用的，但是在某些小程序上是无法使用的cuo

-- 安装 vue-office-pdf
npm install @vue-office/pdf

-- 跳转页面
uni.navigateTo({url:'/pages/.../viewPdf'})

--

viewPdf.vue文件  
------------------------------------------------------------------- 
<template>
	<view class="container">
   <vue-office-pdf 
        src="../../../static/doc/zlzdsc.pdf"
    />
	</view>
</template>

<script setup>
import VueOfficePdf from '@vue-office/pdf'
</script>

错误的原因是小程序的相对路径是走app在手机的路径，所以采用以下方式可以解决

-- 安装 vue-office-pdf
npm install @vue-office/pdf

-- 跳转页面
uni.navigateTo({url:'/pages/.../viewPdf'})

--

viewPdf.vue文件  
------------------------------------------------------------------- 
<template>
	<view class="container">
   <vue-office-pdf 
        :src="pdf"
    />
	</view>
</template>

<script setup>
import VueOfficePdf from '@vue-office/pdf'
import pdf from '@/static/doc/zlzdsc.pdf'
</script>

以上就是 vue3 setup语法糖 uni-app 写法