专栏首页hotqin888的专栏小程序上传各种文件,阅览多种格式(word,excel,ppt,pdf)文件

小程序上传各种文件,阅览多种格式(word,excel,ppt,pdf)文件

我们用小程序与网站交互,那么无非是上传文件,发布文章,阅览文件(主要是office和pdf)和文章。

服务端用engineercms,各种文件分类在网站上展示是这样的:

 可见,有文章,有附件——word格式等,有pdf格式。

小程序支持阅览多种office格式文件

官方列出有:https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

doc

doc 格式

docx

docx 格式

xls

xls 格式

xlsx

xlsx 格式

ppt

ppt 格式

pptx

pptx 格式

pdf

pdf 格式

 所以就可以将服务端混排的各种附件和文章进行混排展示出来,如下图:

当点击文件时,就跳转到文件阅览页,当点击文章时候,就跳转到文件详情页。 

小程序列表 模板切换用官方下面的代码

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

 各种文件扩展名用下面这个工具制作了图标:

https://github.com/joaner/namedavatar

小程序代码:

js

//直接查看各种文件
  downloadFile: function (e) {
    wx.showLoading({
      title: '加载中...',
    })

    var that = this;
    if (that.data.standardFocus) {
      that.setData({
        downloadurl: config.url + '/wx/wxstandardpdf/' + e.currentTarget.dataset.id,
      });
    } else {
      that.setData({
        downloadurl: config.url + '/wx/getwxpdf/' + e.currentTarget.dataset.id,
      });
    };
    var sessionId = wx.getStorageSync('sessionId')
    //发起网络请求
    wx.downloadFile({
      url: that.data.downloadurl + '?hotqinsessionid=' + sessionId,
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      success: function (res) {
        console.log(res.tempFilePath)
        const filePath = res.tempFilePath //返回的文件临时地址,用于后面打开本地预览所用
        wx.openDocument({
          filePath: filePath,
          fileType: e.currentTarget.dataset.type,
          success: function (res) {
            console.log('打开成功');
            wx.hideLoading()
          },
          fail: function (res) {
            // console.log(res);
            wx.showToast({
              title: res.data.info,
              icon: 'loading',
              duration: 1500
            })
          }
        })
      },
      fail: function (res) {
        console.log(res);
        wx.showToast({
          title: res.data.info,
          icon: 'loading',
          duration: 1500
        })
      },
    })
  },

 wxml

<template name="msgTemp">
		<view class="weui-panel__bd">
			<!-- <navigator class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"> -->
			<view class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
				<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
					<image class="weui-media-box__thumb" src="{{Link}}" style="width: 60px; height: 60px;" style="border-radius: 100%" />
					<!-- <wxc-avatar class="avatar">图</wxc-avatar> -->
				</view>
				<view class="weui-media-box__bd weui-media-box__bd_in-appmsg" data-id="{{Id}}" data-type="{{Type}}" catchtap='downloadFile'>
					<view class="weui-media-box__title">{{Title}}</view>
					<view class="weui-media-box__desc">{{tutil.formatTime(Created)}}</view>
					<view class="weui-media-box__desc">{{LiNumber}}</view>
				</view>
				<navigator class="weui-media-box__desc" url="../pdfview/pdfview?id={{Id}}&title={{Title}}&actIndex={{ActIndex}}&link={{Link}}&type={{Type}}">分享</navigator>
				<!-- </navigator> -->
			</view>
		</view>
	</template>

	<!--用name 定义模版-->
	<template name="article">
		<view class='leassonList' data-id="{{Id}}" bindtap="seeDetail">
			<view class='listIn'>
				<view class='leassonImg'>
					<image src="{{Link}}" class='leassonImgs' mode='aspectFill' />
					<!-- <image class="weui-media-box__thumb" src="{{Link}}" style="width: 60px; height: 60px;" style="border-radius: 100%" /> -->
				</view>
				<view class='leassonTitle'>
					<view class='title'>
						{{Title}}
					</view>
					<view class='author'>
						作者:{{Author}}
					</view>
				</view>
			</view>
		</view>
	</template>

			<view wx:for-items="{{msgList}}" wx:key="{{item.id}}">
				<view class="kind-list__item">
					<!--用is 使用模版-->
					<template is="{{item.Type=='isArticle'?'article':'msgTemp'}}" data="{{...item}}" />
				</view>
			</view>

服务端engineercms返回数据为下所示:其中Link,当为文件时,用图标的base64,为文章时,用文章里的第一个图片。

{
  "info": "SUCCESS",
  "searchers": [
    {
      "Id": 15,
      "Title": "珠三角工程模拟飞检设计整改报告和有关说明珠三角工程模拟飞检设计整改报告和有关说明.docx",
      "Type": "docx",
      "Link": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cmVjdCBmaWxsPSIjRkY1NzIyIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48L3JlY3Q+PHRleHQgZmlsbD0iI0ZGRiIgeD0iNTAlIiB5PSI1MCUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iNTAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBhbGlnbm1lbnQtYmFzZWxpbmU9Im1pZGRsZSI+VzwvdGV4dD48L3N2Zz4=",
      "Subtext": "",
      "Author": "",
      "Created": "2020-06-25T11:54:41.4978218Z",
      "Updated": "2020-06-25T11:54:41.4978218Z"
    },
    {
      "Id": 19,
      "Title": "鲁班测试993",
      "Type": "isArticle",
      "Link": "http://127.0.0.1/attachment/LBGCB鲁班工程宝/质量监督/2020June/1593093898342607000.jpg",
      "Subtext": "asdfasdfsadf",
      "Author": "admin",
      "Created": "2020-03-18T14:37:33.5387154Z",
      "Updated": "2020-06-25T14:05:01.7747665Z"
    }
  ]
}

小程序上传各种文件:

 小程序上传文件js:

  //上传文件
  uploadPDF(e) {
    var that = this
    that.setData({
      uploadurl: config.url + '/admin/addwxattachment?pid=' + that.data.id,
    });
    wx.chooseMessageFile({
      count: 10,
      type: 'file',
      success(res) {
        const tempFilePaths = res.tempFiles
        if (tempFilePaths.length > 0) {
          wx.showLoading({
            title: '上传中...',
          })
          //循环比较
          for (var i = 0; i < tempFilePaths.length; i++) {
            var imgUrl = tempFilePaths[i].path;
            var filename = tempFilePaths[i].name;
            var sessionId = wx.getStorageSync('sessionId')
            //发起网络请求
            wx.uploadFile({
              //上传图片的网路请求地址
              url: that.data.uploadurl + '&hotqinsessionid=' + sessionId,
              //选择
              filePath: imgUrl,
              name: 'file',
              formData: {
                'filename': filename
              },
              success: function (res) {
                wx.hideLoading();
                if (res.data.info != "err") {
                  wx.showToast({
                    title: "上传成功",
                    icon: "none",
                    duration: 1500
                  })
                  // 加跳转
                  wx.navigateBack({
                    delta: 1,
                    success: function (e) {
                      var page = getCurrentPages().pop();
                      if (page == undefined || page == null) return;
                      page.onLoad();
                    }
                  })
                } else {
                  wx.showToast({
                    title: "上传失败",
                    icon: "none",
                    duration: 1500
                  })
                }
              },
              fail: function (res) {
                wx.hideLoading();
                wx.showToast({
                  title: "文件上传失败",
                  icon: "none"
                })
              }
            });
          }
        }
      }
    })
  },

当然,上传按钮必须要做2个,一个是上传文件,一个是发布文章哦。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java解析OFFICE(word,excel,powerpoint)以及PDF的实现方案及开发中的点滴分享

    上帝
  • 教你几个白嫖百度文库的方法,亲测可用!建议收藏!

    谭庆波
  • 个人永久性免费-Excel催化剂功能第88波-批量提取pdf文件信息(图片、表格、文本等)

    在日常工作中,为了保护数据免于被二次利用和为了在文件分发过程中,可以不受其他电脑因为软件版本不同等原因导致文件不能打开或打开格式版面大变形,将要分发的文件,无论...

    Excel催化剂
  • 打破格式壁垒 !COS助力腾讯文档优化在线预览效果

    说起腾讯文档,相信大家对此并不陌生。在新冠疫情防控期间,腾讯文档在人员流动排查、健康信息收集、居家学习、协同办公等场景发挥了巨大的作用。

    云存储
  • 文件预览——一路躺过来的那些坑

    因为最近项目比较紧,所以dubbo源码系列是顾不上了。 恰巧这周花了几天在做文件预览这块,两三天的时间下来,有过一些走弯路的经验教训(准确说,全都是弯路),在这...

    JackieZheng
  • Shell 命令行,写一个自动整理 ~/Downloads/ 文件夹下文件的脚本

    Shell 命令行,写一个自动整理 ~/Downloads/ 文件夹下文件的脚本 在 mac 或者 linux 系统中,我们的浏览器或者其他下载软件下载的文件全...

    FungLeo
  • .net 实现Office文件预览 Word PPT Excel 2015-01-23 08:47 63人阅读

    先打个广告: .Net交流群:252713569 本人QQ :524808775 欢迎技术探讨, 近期公司要求上传的PPT和Word都需要可以在线预览.. 小弟...

    GuZhenYin
  • 万能文件在线预览项目,开源!

    大家好,我是鱼皮,今天分享一个优秀的、100% 开源、持续更新的项目,拿来学习或者作为项目经历写在简历上都很不错。

    程序员鱼皮
  • 办公利器!用Python快速将任意文件转为PDF

    痛点: 相信大家都会遇到一种场景。老师/上司要求你把某个文件转为pdf,并且是一批(不止一个,一个的话手动就可以搞定),并且这种是枯燥无聊的工作,既没有什么技术...

    Python研究者
  • 使用Python转换PDF,Word/Excel/PPT/md/HTML都能转!

    今天讲的是各位一定会接触到的PDF转换,关于各种格式的文件转换为PDF有很多第三方工具与网站可以实现,但是使用Python的好处不仅可以批量转换,同时一旦脚本写...

    刘早起
  • 看完这篇Python操作PPT总结,从此使用Python玩转Office全家桶就没有压力了!

    今天本文将基于第三方库pptx,详细讲解如何使用Python操作Office全家桶最后一位——PPT。

    刘早起
  • 办公利器!用Python快速将任意文件转为PDF

    相信大家都会遇到一种场景。老师/上司要求你把某个文件转为pdf,并且是一批(不止一个,一个的话手动就可以搞定),并且这种是枯燥无聊的工作,既没有什么技术含量又累...

    Python研究者
  • 推荐一款提高效率的工具

    在工作中经常会遇到PDF转Word等可编辑文本情况,相信很多小伙伴用的是文字一个一个打,图片一个一个截的笨办法了。今天小编也和大家一样,准备这样搞,但是篇幅实在...

    我的小碗汤
  • Spring Boot搭建的一个在线文件预览系统!支持ppt、doc等多种类型文件预览

    总的来说我觉得 kkFileView 是一个非常棒的开源项目,在线文件预览这个需求非常常见。感谢开源!

    Guide哥
  • 还在为在线预览Office文档发愁?试试这个开源系统吧!

    总的来说我觉得 kkFileView 是一个非常棒的开源项目,在线文件预览这个需求非常常见。感谢开源!

    macrozheng
  • 日常分享|一个格式转换功能比较齐全的在线转换软件

    可能大家都遇见过这样的烦恼事,当看到一个特别有用的英文版的文档想把它复制下来然后进行翻译,但偏偏文档也不是Word格式,而且文档的篇幅又特别的多,简单的使用复制...

    FreeRonin
  • 使用Python转换PDF,Word/Excel/PPT/md/HTML都能转!

    今天讲的是各位一定会接触到的PDF转换,关于各种格式的文件转换为PDF有很多第三方工具与网站可以实现,但是使用Python的好处不仅可以批量转换,同时一旦脚本写...

    刘早起
  • 基于SpringBoot的文件在线预览神器,可支持99%常用文件的在线预览!

    kkFileView可以用来搭建文件在线预览服务,在Github上已有5.7k+Star。该项目使用流行的SpringBoot搭建,易上手和部署,基本支持主流办...

    macrozheng
  • 那些可多人协作编辑的在线文档工具

    最近使用了下石墨文档,简直就是在线版的Word,Excel,PPT,而且可以多人实时编辑预览,真的太好用了,搜索了下发现这种在线文档工具还挺多的,这里做个整理推...

    苏生不惑

扫码关注云+社区

领取腾讯云代金券