uni-app开发在线预览pdf（h5/app）

绝地灬酷狼 2023-03-03 11:18 60阅读 0赞

本人亲测可用哦！

核心：pdf插件+web-view

pdf插件获取地址 [https://github.com/DonnaLh/-pdf-/tree/master][https_github.com_DonnaLh_-pdf-_tree_master]

注意：这个链接里面的文件都是需要的哦  pdf文件里放的是插件，pdf.html也是需要的

![20200731095744157.png][]

pages下的filePreview.vue也需要

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

**最后大概的目录是如下图所示**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 1][]

filePreview.vue是我们要跳转的路径，放在哪里看你自己

**最后的示例如图：**

点击pdf链接跳转到filePreview：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 2][]

附：filePreview.vue的代码如下所示：

<template>
    	<view>
    		<web-view :src="url"></web-view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				url: '',
    			};
    		},
    		onLoad(params){
    			let {url} = params
    			this.url = `/hybrid/html/pdf.html?url=${url}`
    		},
    		onBackPress(){}
    	}
    </script>
    
    <style>
    </style>

注意，上面的地址，如果根据你自己的文件存放路径而变，如果是按照我上面的存放路径放的话，就不需要修改了

[https_github.com_DonnaLh_-pdf-_tree_master]: https://github.com/DonnaLh/-pdf-/tree/master
[20200731095744157.png]: /images/20230208/ac5a9ca5c9a741dfb0fa30fff43e9061.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: /images/20230208/123f998bc1e34eda9c00785fa8c6c33c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 1]: /images/20230208/17ccf3d1936f4f0b899ab1bb94dde57d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 2]: /images/20230208/1f8f89135fe046dfb7e0e58203778996.png