uniapp 预览PDF - web-view组件用法

web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面
webview 指向网页的链接(小程序仅支持加载网络网页)

image

以使用web-view来预览PDF为例:

点击查看代码
<template>
<view style="width: 100%;" >
<web-view :src="webUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webUrl:'',
viewerUrl: '/hybrid/html/web/viewer.html',
}
},
onload(options) {
let fileUrl = encodeURIComponent(JSON.stringify("pdf的地址") // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
//encodeURIComponent(JSON.stringify(this.billListData[index])
//使用encodeURIComponent以及JSON.stringify()方法对对象进行字符串化和编码,这样可以控制url参数的长度
this.webUrl = this.viewerUrl + '?file=' + fileUrl
}
}
</script>
这里的 webUrl 就是pdf文件的链接,我是通过url参数传递进来的,这里需要注意如果参数过长会有问题的

详情请看:https://uniapp.dcloud.io/component/web-view

posted @   蓦然JL  阅读(3835)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App
  1. 1 唯一 G.E.M.邓紫棋
  2. 2 他只是经过 白敬亭 魏大勋
  3. 3 Uptown Funk Mark Ronson / Bruno Mars
  4. 4 在你的身边 盛哲
  5. 5 Edge of My Life Manafest
  6. 6 凄美地 郭顶
  7. 7 Wonderful Tonight Boyce Avenue
  8. 8 心如止水 Ice Paper
  9. 9 Sugar Maroon 5
  10. 10 静谧时光 JIAxNING
  11. 11 Right Now (Na Na Na) Aamir
  12. 12 Dangerously Charlie Puth
  13. 13 Someone You Loved Madilyn Paige
  14. 14 Shape of My Heart Boyce Avenue
  15. 15 We Can't Stop Boyce Avenue / Bea Miller
  16. 16 Perfect Boyce Avenue
  17. 17 Love Me Like You Do Boyce Avenue
  18. 18 Thank You Boyce Avenue
  19. 19 Don’t Wanna Know Boyce Avenue / Sarah Hyland
唯一 - G.E.M.邓紫棋
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

Not available

访问主页
关注我
关注微博
私信我
返回顶部
点击右上角即可分享
微信分享提示