首页 > 其他分享 >uniapp 在线预览pdf 或者 文件

uniapp 在线预览pdf 或者 文件

时间:2024-08-27 16:47:28浏览次数:6  
标签:uniapp 预览 res item pdf uni fileUrl webview

页面代码:
<template>
    <view>
        <web-view :src="fileUrl"></web-view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                fileUrl: "",
                pdfViewUrl: '/static/pdfview/web/viewer.html'
            }
        },
        onl oad(options) {
            this.fileUrl = decodeURI(options.fileUrl)
            if (!!options.isPdfView) {
                this.fileUrl = this.pdfViewUrl + '?file=' + encodeURI(this.fileUrl)
            }
        },
        methods: {
 
        }
    }
</script>
 
<style>
 
</style>

方法
//h5预览pdf h5PdfView(item) { uni.showLoading({ title: '加载中...' }) uni.request({ url: this.baseFileURL + '/pdf/preview/' + item.resourceId, method: 'POST', responseType: 'arraybuffer' }).then(res => { uni.hideLoading() let pdfData = res.data let blob = new Blob([pdfData], { type: 'application/pdf;charset=UTF-8' }) pdfData = window.URL.createObjectURL(blob) this.h5PdfUrl = encodeURIComponent(pdfData) uni.navigateTo({ url: '/subpages/webview/webview?fileUrl=' + this.h5PdfUrl + "&isPdfView=true", }) }) }, //pdf预览 pdfView(item) { item.fileUrl = this.baseFileURL + '/pdf/preview/' + item.resourceId // #ifdef APP-PLUS switch (uni.getSystemInfoSync().platform) { case "android": console.log("android") uni.navigateTo({ url: '/subpages/webview/webview?fileUrl=' + encodeURI(item.fileUrl) + "&isPdfView=true", }) break; case "ios": console.log("ios") uni.navigateTo({ url: '/subpages/webview/webview?fileUrl=' + encodeURI(item.fileUrl), }) break; } // #endif // #ifdef H5 this.h5PdfView(item) // #endif // #ifdef MP-WEIXIN let fileName = item.resourceId.substring(item.resourceId.lastIndexOf('/') + 1); uni.downloadFile({ url: item.fileUrl, //文件地址 filePath: wx.env.USER_DATA_PATH + '/' + fileName, success: function(res) { const filePath = res.filePath || res.tempFilePath; uni.openDocument({ filePath: filePath, showMenu: false, success: function(res) {} }); } }); // #endif }

第二种方法

  pdf.js  
 官方地址:http://mozilla.github.io/pdf.js/getting_started

标签:uniapp,预览,res,item,pdf,uni,fileUrl,webview
From: https://www.cnblogs.com/fyh0912/p/18383044

相关文章

  • 如何提防PDF XSS攻击
    请求文件弹窗XSS注入解决方法<dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>3.0.3</version></dependency>try{PDDocumentpdDocument=Loader.loadPDF(file.g......
  • 在三维场景中点击设备,相机靠近放大预览功能实现
    效果如下:在三维场景中点击设备,相机靠近放大预览功能实现完整代码如下:1、html    <divid="tag"style="display:none;">        <!--position:relative;约束子元素绝对定位参照点-->        <divstyle="position:relative;width:400px;heig......
  • uniapp微信小程序获取小程序新版本
    functioncheckUpdate(){//使用该接口,可以获知是否有新版本小程序、新版本是否下载好以及应用新版本的能力。constupdateManager=uni.getUpdateManager()updateManager.onCheckForUpdate(function(res){//请求完新版本信息的回调console.log(res.hasUp......
  • 界面控件DevExpress VCL v24.2路线图预览——增强云集成、简化应用程序皮肤等
    DevExpressVCL Controls是Devexpress公司旗下老牌的用户界面套包,所包含的控件有:数据录入、图表、数据分析、导航、布局等。该控件能帮助您创建优异的用户体验,提供高影响力的业务解决方案,并利用您现有的VCL技能为未来构建下一代应用程序本文中包含了DevExpressVCLv24.2官方发......
  • vue3uniapps使用富文本mp-html插件
    1.实现效果具体需求:顶部是搜索栏,包括搜索结果个数,目前跳到第几个,包含上一个、下一个按钮。富文本区域关键词高亮黄色,当前关键词为高亮橙色。如图2.版本号用到vue3和uniapp,mp-html插件版本是v2.5.0,插件地址:https://ext.dcloud.net.cn/plugin?id=805用npm方式打包放到......
  • 使用 UniApp 实现摄像头视频流的接入并在页面上显示视频流
    UniApp是一个使用Vue.js开发所有前端应用的框架,它支持一次开发,多端部署(包括H5、小程序和APP)。下面我将展示如何使用UniApp实现摄像头视频流的接入,并在页面上显示视频流。我还会提供一些使用场景以及代码优化建议。使用场景直播应用:用户可以实时分享自己的画面。在线......
  • Microsoft Word使用公式字体Latin Modern Math时导出pdf显示异常
    MicrosoftWord使用公式字体LatinModernMath时导出pdf显示异常参考资料1问题描述将Word公式字体修改为LatinModernMath,另存为pdf,导出的pdf文件中公式字体为位图而非矢量图,且部分符号可能缺失。2问题原因安装的字体LatinModernMath为otf文件而非ttf文件,Word无法将字体......
  • 卡关?风灵月影启动!《黑神话:悟空》风灵月影四十二项修改器预览(含下载地址)
    危!天命人速归!《黑神话:悟空》现已正式发售,风灵月影宗的弟子们,翘首以盼的时刻终于到来!下面就位大家带来直面天命的神器,助你在神话世界中所向披靡!《黑神话:悟空》风灵月影四十二项修改器https://download.csdn.net/download/Vernon_218/89632504第一步:下载修改器。第二步:下载完......
  • LangChain入门手册——附赠PDF版
    《LangChain入门指南》LangChain作为大模型集成框架鼎鼎大名,这本《LangChain入门指南》是一本很及时的书,值得推荐~01为什么需要LangChain首先想象一个开发者在构建一个LLM应用时的常见场景。当你开始构建一个新项目时,你可能会遇到许多API接口、数据格式和工具。对于一......
  • Python pdf 转 docx
    本文介绍了用pdf2docx将pdf转成docx的方法,发现转换的时间较长,而且没有进度,仅在控制台有输出,而convert的逐页转换会生成多个docx,因此写了个逐页转换的demo首先是基本的使用importpdf2docxfromdocxcomposeimportcomposerfrompdf2docximportparsedefconvert......