微信小程序打开pdf文件；uni-app下载打开pdf文件；uni-app微信小程序下载打开pdf文件预览；

1.首先需要在小程序后台-开发设置-服务器域名配置好下载的域名。不配置：会导致下载失败和打开文件失败；

2.pdf文件的url要确保可以浏览器直接打开。

<template><view class="pdf"><view v-for="(item,index) in pdfList" :key="index"><view>该pdf可以直接在浏览器打开</view><view style="text-align: center;color:#007AFF;" @click="openPdf(item.url)">{{item.name}}</view></view></view>
</template><script>
export default {data () {return {pdfList: [{name: '某某报告.pdf',url: 'https://push-repair.zuihuibao.cn/ACHC00DE0421FP00359D.pdf?e=1629455710&token=vuxdWg0Cy8FEDKDawxk2AJ2Mq9guC8xVHBddeMpk:wPeqcMpPZkCUIosNOSQBz4132bA='// chrome-extension://ikhdkkncnoglghljlkmcimlnlhkeamad/pdf-viewer/web/viewer.html?file=https%3A%2F%2Fpush-repair.zuihuibao.cn%2FACHC00DE0421FP00359D.pdf%3Fe%3D1629432102%26token%3DvuxdWg0Cy8FEDKDawxk2AJ2Mq9guC8xVHBddeMpk%3AJWYfdma3C84sDC2qrvTQVZTlczs%3D}]}},methods: {openPdf (pdfUrl) {// 1.pdfUrl  可以直接在浏览器打开  2.一定要在小程序后台配置该pdf的域名 让其可以下载 uni.showLoading({title: '正在打开...'})uni.downloadFile({url: pdfUrl,success: function (res) {console.log('下载的res', res)var filePath = res.tempFilePathuni.openDocument({filePath: encodeURI(filePath),// fileType: 'pdf',success: function (res) {uni.hideLoading()// uni.showToast({//   title: '打开文档成功',//   duration: 1500,//   icon: 'none'// })console.log('打开文档成功')},fail: function (err) {uni.hideLoading()uni.showToast({title: '打开失败',duration: 1500,icon: 'none'})console.log('打开失败')}})},fail: function (err) {console.log('下载失败原因', err)uni.hideLoading()setTimeout(() => {uni.showToast({title: '下载失败',duration: 1500,icon: 'none'})}, 1500)}})}},
}
</script><style>
</style>

微信小程序打开pdf文件；uni-app下载打开pdf文件；uni-app微信小程序下载打开pdf文件预览；相关推荐

解决uniapp小程序打包体积超过2M，提示包体积超过2M，“main packagexxx”,不给上传和预览的解决办法，绝对有效
解决办法,原文地址: 解决uniapp小程序打包体积超过2M,提示包体积超过2M,"main packagexxx",不给上传和预览的解决办法,绝对有效!在微信小程序开发中,为了解 ...
【微信小程序】小程序实现文件的上传及预览，以PDF文件为例。
安卓系统和ios系统一开始被一篇ios预览PDF文件需要用到webview的博客给误导了,以为安卓预览文件需要调用wx.downloadFile()和wx.openDocument()这两个API, ...
WEB端和微信小程序端的文档文件在线预览方法
文件的在线预览方式汇总文件在线预览功能可以提高用户体验,值得加入. 一般常见的文件有office套装.pdf.txt.md.和音视频. 音视频的预览是单独一块,今天主要说说文档文件的在线预览功能. ...
微信小程序----图片预览
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! DEMO下载效果图原理使用wx.chooseImage选择本地图片: 使用wx.preview ...
微信小程序实现弹窗预览图片
今天要实现,点击实现预览图片的功能,看了网上的解决方案,都不太满意,于是自己写了一个.用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章微信小程序之第三方UI框架 za ...
微信小程序轮播图放大全屏预览（爆料）
轮播图放大预览效果的实现前言一.wx.previewImage接口API 官方介绍: 代码示例: 二.图片全屏预览 1.效果展示 2.编码 img.wxml img.js img.wxss 三.轮 ...
android 在线预览pdf文件（目前最全）
android原生webView不支持预览pdf文件,ios却可以,所以android想要实现在线预览webView要通过其他方法,有以下几种方法: 一.andorid原生自带的pdf管理库,主要提供 ...
在线文件/文档预览/分页分片预览之开源kkfileview（word转pdf，pdf截取，pdf转图片，Aspose jobConverter ， OpenOffice ，libreoffice ）
前提说明浏览器不能直接浏览word文件,但可以浏览pdf文件!!! 可以后台把word,excel 转成成pdf.然后给前端预览: 业界常用的开源工具有:Aspose jobConverter , ...
企业微信内嵌H5，引入 JS-SDK 调用 wx.previewFile 预览/下载文件（vue2.0适用）
文章目录业务场景使用步骤 1. 引入企业微信 JS-SDK 2. 配置 wx.config 3. 调用 wx.previewFile 附:官方文档业务场景基于vue2.0开发企业微信内嵌H5, ...
vue怎么实现office，PDF，图片，OFD文件预览
要在Vue中实现Office.PDF.图片和OFD文件的预览,可以使用不同的第三方库来处理不同类型的文件.以下是一个详细的教程和代码示例,使用vue-pdf库来预览PDF文件,使用vue-doc-pr ...

微信小程序打开pdf文件；uni-app下载打开pdf文件；uni-app微信小程序下载打开pdf文件预览；

微信小程序打开pdf文件；uni-app下载打开pdf文件；uni-app微信小程序下载打开pdf文件预览；相关推荐

最新文章

热门文章