小程序中打开网页和pdf

简介: 打开网页的方法有两种第一种是最简单的微信官方提供的方法,直接把要打开的网页地址赋给web-view标签的src属性 第二种需要引入一个第三方插件,下面的写法只适用于wepy框架中,其他框架中写法略有不同。

打开网页的方法有两种第一种是最简单的微信官方提供的方法,直接把要打开的网页地址赋给web-view标签的src属性

     <web-view src="{{article}}"> </web-view>

第二种需要引入一个第三方插件,下面的写法只适用于wepy框架中,其他框架中写法略有不同。

<template>
<view>
    //插件中的固定写法
    <import src="../../wxParse/wxParse.wxml" />
    <template is="wxParse" data="{{wxParseData:article.nodes}}" />
    <view wx:if='article' class='addclass'></view>
</view>
</template>
<script>
//引入插件
import WxParse from "../../wxParse/wxParse";
export default class webview extends wepy.page {
    data = {
        //网页地址路径
        article: '',
    }
    methods = {
    }
    async onLoad(options) {
        let ret = await api.rentalContracts({
            id: this.id,
            method: 'GET'
        });
        this.article = ret.data
        //调用插件中的方法设置article中的网页路径
        WxParse.wxParse('article', 'html', this.article, this, 1);
    }
}

打开phf文件给按钮定义一个preview方法,在downloadFile方法中调用wx.openDocument方法就可以实现。

       preview() {
            let that=this.
            wx.downloadFile({
                url: 'https://www.*******.com/contract/default/pdf',
                success: function(res) {
                    console.log(res)
                    var Path = res.tempFilePath //返回的文件临时地址,用于后面打开本地预览所用
                    that.webview=Path
                    wx.openDocument({
                        filePath: Path,
                        success: function(res) {
                            console.log('打开文档成功')
                        }
                    })
                },
                fail: function(res) {
                    console.log(res)
                }
            })
        },
相关文章
|
6月前
|
Web App开发 JavaScript 前端开发
网页VUE纯前端在线预览编辑Office,支持doc/docx、xls/xlsx、ppt/pptx、pdf等格式
随着互联网技术的不断发展,越来越多的企业开始采用在线办公模式,微软Office Word 是最好用的文档编辑工具,然而doc、docx、xls、xlsx、ppt、pptx等格式的Office文档是无法直接在浏览器中直接打开的,如果可以实现Web在线预览编辑OffIce,肯定会还带来了更高效、便捷的办公体验,为我们的工作带来了更多可能性。
1308 0
|
2月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
3月前
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
2629 0
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
4月前
|
小程序
旅游计划定制小程序网页模板源码
旅游计划定制小程序网页模板源码
40 1
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
36 2
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
|
4月前
|
移动开发 小程序 前端开发
uniap开发微信小程序如何在线预览pdf文件
这是一段关于在线预览和处理PDF的多方案说明,包括使用JavaScript库PDF.js(如`pdfh5.js`)实现H5页面预览,提供QQ群和技术博客链接以获取帮助和支持。还介绍了两个适用于Uni-app的插件,一个用于H5、小程序和App中的PDF预览和下载,另一个专门解决手机端PDF预览问题。此外,还详细描述了在Uni-app中使用微信小程序API`wx.openDocument`显示PDF的步骤,包括上传文件、配置权限和编写代码。
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的布卡维纳红酒网页附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的布卡维纳红酒网页附带文章和源代码部署视频讲解等
137 8
|
4月前
|
算法
「AIGC」readLink实现url识别pdf、网页标题和内容
AIGC算法实现服务,通过Express接收URL,识别内容类型:HTML使用Cheerio解析,PDF用`pdf-parse`。自定义函数提取标题和内容。示例代码展示了如何处理HTTP响应,提取HTML的`&lt;title&gt;`及PDF文本,并提供错误处理。服务器运行在端口3000。
46 0
|
4月前
|
小程序
【亲测有效】3步实现 微信小程序内接入小程序客服,网页端客服工具与移动端小程序客服工具使用方法,使用入口,并设置当前客服状态
【亲测有效】3步实现 微信小程序内接入小程序客服,网页端客服工具与移动端小程序客服工具使用方法,使用入口,并设置当前客服状态
415 0
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的在线考试与学习交流网页平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的在线考试与学习交流网页平台的详细设计和实现

热门文章

最新文章