精华内容
下载资源
问答
  • 微信小程序预览文件

    2020-02-05 17:12:23
    js代码 showloadFile: function(e) { wx.showLoading({ title: '加载中...', }); let url = e....//线上文件路径 //判断文件类型 let ext = url.substr(url.lastIndexOf(".")).replace('.', '');...

    js代码

    showloadFile: function(e) {
    
    wx.showLoading({
    
          title: '加载中...',
    
    });
    
    let url = e.currentTarget.dataset.info;//线上文件路径
    
    //判断文件类型
    
    let ext = url.substr(url.lastIndexOf(".")).replace('.', '');
    
    if (ext != 'doc' && ext != 'docx' && ext != 'xls' && ext != 'xlsx' && ext != 'ppt' && ext != 'pptx' && ext != 'pdf') {
    
    wx.hideLoading();
    
    app.showToast({
    
    title: '错误的文件格式',
    
    icon: 'none'
    
    })
    
    };
    
    //预下载文件
    
    wx.downloadFile({
    
    // e.target.dataset.name 是文件的地址
    
    url: url,
    
    header: {},
    
    fileType: types,
    
    success(res) {
    
    let filePath = res.tempFilePath;//预下载路径
    
    // console.log(res)
    
    //打开文件
    
    wx.openDocument({
    
    filePath: filePath,
    
    success(res) {
    
    wx.hideLoading();
    
    // console.log('打开文档成功')
    
    }
    
    })
    
    }
    
    })
    
    },
    
    展开全文
  • 微信小程序的文件预览,供大家参考,具体内容如下 微信小程序的文件预览需要先使用wx.downloadFile下载文件,然后使用下载文件的临时路径通过wx.openDocument进行文件预览 wxml代码: <button bindtap='...
  • 微信小程序预览word,excel,doc文件Demo代码,下载代码直接使用微信小程序打开运行即可,可以使用微信小程序对应的真机调试进行测试预览功能
  • 微信小程序将后端接口返回的二进制流PDF 文件在线预览一、微信小程序的文件系统二、小程序实现文件预览三、实现效果图总结 一、微信小程序的文件系统 微信小程序文件系统参考官方文档:微信小程序文档 我们主要是...

    微信小程序将后端接口返回的二进制流PDF 文件在线预览



    一、微信小程序的文件系统

    微信小程序文件系统参考官方文档:微信小程序文档
    我们主要是把后端接口获取到的pdf二进制流,下载保存到微信的本地用户文件,下载后预览再删掉,因为本地用户文件每个用户只有200M,所以预览后删掉。

    二、小程序实现文件预览

    代码如下(示例):

    //使用登记牌扫码查询
    		usequercode() {
    			uni.scanCode({
    				onlyFromCamera: true,
    				success: function(res) {
    					wx.showLoading({
    						title: '正在识别中....'
    					});
    					//扫描二维码
    					if (res.scanType != 'QR_CODE') {
    						uni.showToast({
    							title: '请扫描正确的使用登记牌二维码',
    							duration: 2000,
    							icon: 'none'
    						});
    						return;
    					}
    					//未携带需要的参数
    					else if (res.result.indexOf('applyId') < 0 || res.result.indexOf('applyType') < 0) {
    						uni.showToast({
    							title: '解析二维码中存在非法参数',
    							duration: 2000,
    							icon: 'none'
    						});
    						return;
    					}
    					console.log('条码类型:' + res.scanType);
    					console.log('条码内容:' + res.result);
    					//再文件下载后的用处
    					const result = res.result;
    					const applyid = result.substring(result.lastIndexOf('=') + 1); //获取到条码内容,获取参数访问接口
    					const applytype = result.substring(result.indexOf('=') + 1, result.indexOf('&'));
    					console.log(applyid);
    					console.log(applytype);
    
    					//读取本地文件
    					const fs = uni.getFileSystemManager();
    
    					uni.request({
    						url: getApp().globalData.config.url + 'enterprise/useApply/usingCodeUpload',
    						method: 'POST',
    						headers: { isToken: false },
    						data: { applyId: applyid, applyType: applytype },
    						responseType: 'arraybuffer', //此处是请求文件流,必须带入的属性
    						success: res => {
    							console.log(res);
    							var data = res.data;
    							//将接口返回的二进制数据转成pdf文件
    							//uni.getFileSystemManager()
    							wx.getFileSystemManager().writeFile({
    								// 写文件
    								filePath: wx.env.USER_DATA_PATH + '/使用登记牌.pdf', // wx.env.USER_DATA_PATH 指定临时文件存入的路径,后面字符串自定义
    								data: data,
    								encoding: 'binary', //二进制流文件必须是 binary
    								success(res) {
    									wx.openDocument({
    										// 新开页面打开文档
    										filePath: wx.env.USER_DATA_PATH + '/使用登记牌.pdf', //拿上面存入的文件路径
    										success: function(res) {
    											console.log(res);
    											setTimeout(() => {
    												wx.hideLoading();
    											}, 500);
    											//查看后删除本地用户文件
    											//wx.getFileSystemManager().unlink({
    												// 写文件
    												//filePath: wx.env.USER_DATA_PATH + '/使用登记牌.pdf', // wx.env.USER_DATA_PATH 指定临时文件存入的路径,后面字符串自定义
    
    												//success(res) {
    													//console.log(res);
    												//}
    											//});
    										}
    									});
    								},
    								error(error) {
    									console.log(error);
    								}
    							});
    						}
    					});
    				}
    			});
    		},
    

    三、实现效果图

    该处使用的url网络请求的数据。


    总结

    我本来想打开后删除的,再真机调试下没问题,但发布在手机上提示预览失败,请在其他应用打开,删除写在compltet也一样,后面考虑到服务器资源内存资源比存储性能高,由放在服务器上了pdf。

    展开全文
  • 企业微信系列之JSSDK文件预览对接。企业微信JSSDK是企业微信面向网页开发者提供的基于企业微信内的网页开发工具包。 通过使用企业微信JSSDK,网页开发者可借助企业微信高效地使用拍照、选图、语音、位置等手机系统的...

    企业微信系列之JSSDK文件预览对接

    企业微信JS-SDK是企业微信面向网页开发者提供的基于企业微信内的网页开发工具包。
    通过使用企业微信JS-SDK,网页开发者可借助企业微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用企业微信分享、扫一扫等企业微信特有的能力,为企业微信用户提供更优质的网页体验。

    通过使用企业微信JS-SDK,网页开发者可借助企业微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用企业微信分享、扫一扫等企业微信特有的能力,为企业微信用户提供更优质的网页体验。

    最近在对接企业微信的文件预览,在企业微信官方文档找到参考链接,https://work.weixin.qq.com/api/doc/90000/90136/90497

    wx.previewFile({
        url: '', // 需要预览文件的地址(必填,可以使用相对路径)
        name: '', // 需要预览文件的文件名,必须有带文件格式的后缀,例如.doc(不填的话取url的最后部分,最后部分是个包含格式后缀的文件名)
        size: 1048576 // 需要预览文件的字节大小(必填,而且大小必须正确,否则会打开失败)
    });
    
    

    官网给出的资料是比较少的,对接过程遇到的问题,通过博客记录下来,分享出来,仅供参考:
    在这里插入图片描述
    对接遇到问题:

    • url这个链接,要看项目,有些项目都是有专门的文件服务器,然后将url放上去就行,而对于我对接的系统,是将文件保存到服务器对应的磁盘路径,这种问题也困扰了我一会,然后想到将文件流output.write出来
    /**
      * <h2>wx.previewFile微信材料预览,提供url给前端调用</h2>
      * @Author nicky
      * @Date 2021/05/07 15:32
      * @Param [filePath, response]
      * @return void
      */
     @ApiOperation(value = "1.jssdk材料http预览接口",position = 1)
     @GetMapping(value = {"/wxPreviewFile"})
     @ApiImplicitParams({@ApiImplicitParam(name = "filePath", value = "附件相对路径,url编码一遍", required = true) })
     public void wxPreviewFile(@RequestParam(value = "filePath", required = true)String filePath, HttpServletResponse response) throws Exception{
         try {
             if (StringUtils.isNotBlank(filePath)) {
                 filePath =URLEncoder.encode(filePath , "UTF-8");
             }
             if (log.isInfoEnabled()) {
                 log.info("filePath:{}", ConfigConstant.FILEBASEPATH +filePath);
             }
             byte[] bytes = CommonFileUtil.loadFromFile( ConfigConstant.FILEBASEPATH + filePath);
             OutputStream output = response.getOutputStream();
             response.setContentType(CommonFileUtil.loadContentType(CommonFileUtil.loadSuffix(filePath)));
             output.write(bytes);
             output.flush();
             output.close();
         } catch (Exception e) {
             // ignore exception
         }
     }
    

    文件工具类代码:

    static{
    	FILE_TYPES.put("xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");//xlsx
    	FILE_TYPES.put("xls", "application/vnd.ms-excel");//xls
    	FILE_TYPES.put("docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document");//docx
    	FILE_TYPES.put("doc", "application/msword");//doc
    	FILE_TYPES.put("jpg", "image/jpeg");//jpg
    	FILE_TYPES.put("png", "image/png");//png
    	FILE_TYPES.put("gif", "image/gif");//gif
    	FILE_TYPES.put("txt", "text/plain");//txt
    	FILE_TYPES.put("pdf", "application/pdf");//txt
    }
    
    public static String loadContentType(String fileType){
    	String temp =  FILE_TYPES.get(fileType);
    	if(StringUtils.isEmpty(temp)){
    		return fileType;
    	}else{
    		return temp;
    	}
    }
    
    public static String loadSuffix(String name) {
    if(StringUtils.isEmpty(name) || name.length()==0)
    		return "";
    	return name.substring(name.lastIndexOf(".")+1);
    }
    
    public static   byte[] loadFromFile(String localStorePath) throws IOException {
       BufferedInputStream in = new BufferedInputStream(new FileInputStream(localStorePath));
        ByteArrayOutputStream out = new ByteArrayOutputStream(1024);
        byte[] temp = new byte[1024];
        int size = 0;
        while ((size = in.read(temp)) != -1) {
            out.write(temp, 0, size);
        }
        in.close();
        byte[] content = out.toByteArray();
        return content;
    }
    
    • name参数的文件名最好和url的一致,填错了是不能预览和下载的,所以需要注意
      在这里插入图片描述
    展开全文
  • let self = this wx.downloadFile({ url: 'https://myqcloud.com/itpmp/itpmp.pdf', //要预览的PDF的地址 ... // HTTP 请求的 Header,Header 中不能设置 Referer keyid: "0f1f8ff9-e2d7-4513-831...
        let self = this
        wx.downloadFile({
          url: 'https://myqcloud.com/itpmp/itpmp.pdf', //要预览的PDF的地址
          // filePath: `${wx.env.USER_DATA_PATH}`,
          header: {
            // HTTP 请求的 Header,Header 中不能设置 Referer
            keyid: "0f1f8ff9-e2d7-4513-8312-16989d9e80b9"
          },
          success: function (res) {
            console.log(res);
            if (res.statusCode === 200) { //成功
              var Path = res.tempFilePath//返回的文件临时地址,用于后面打开本地预览所用
              wx.openDocument({
                filePath: Path, //要打开的文件路径
                showMenu: true, // 是否显示右上角菜单
                success: function (res1) {
                  console.log("打开成功");
                  self.setData({
                    msg: "open 成功"
                  })
                },
                fail: function (res1) {
                  self.setData({
                    error: "open error"
                  })
                  console.log(res1); //失败
                }
              })
            }
          },
          fail: function (res) {
            console.log(res); //失败
          }
        })

    微信官方API地址:

    https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html

    https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

    展开全文
  • 在网上下载了格式转换器转换成了MP4文件,发现在Windows 10不能预览视频,打开也提示不支持此项目所用格式,我转换成MP4文件用的编码是AVC(H264)! 本人电脑上没安装别的视频播放器,选择Windows Media Player播放...
  • 项目需要用uniapp来开发微信小程序,其中,有一个功能是预览pdf, 后台以链接形式返回pdf地址,一开始使用web-view做链接跳转,但是出现ios文件可以正常打开,android打开的情况,本来想用pdf.js做,后来发现微信...
  • 微信小程序的文件预览需要先使用wx.downloadFile下载文件,然后使用下载文件的临时路径通过wx.openDocument进行文件预览 wxml代码: &amp;lt;button bindtap='preview'&amp;gt;简历预览&amp;lt;/...
  • 微信小程序打开预览下载的文件

    万次阅读 2018-06-13 22:08:05
    微信小程序开发交流qq群 173683895 ...使用 wx.openDocument(obj) 方法预览 wx.downloadFile({ url: 'http://example.com/somefile.pdf', success: function (res) { var filePath = res.tempFile...
  • 微信小程序预览word,doc,excel文件

    千次阅读 2020-05-21 16:36:19
    代码如下: 配置好对应的filePath,之后保存即可 Page({ data: { }, onLoad: function () { var that = this; ...//对应的网络路径,... wx.downloadFile({//下载对应文件 url: filePath, success: function (re
  • egret本地可以运行,但转为微信小游戏后无法...● 因为微信开发工具不能断点,所以只能多写点log排除一下,看是哪一步卡住,我的原因是 RES.ResourceEvent.CONFIG_COMPLETE 资源加载失败,所以加了 RES.Resource...
  • 微信小程序 openDocument 预览文件

    千次阅读 2017-03-02 17:28:00
    wx.openDocument 官方文档里写着需要一个叫 filePath 的参数,表示文件路径,需要通过 downFile 获得。 所以,要使用 openDocument 得先使用 downloadFile . 其实 downloadFile 不是下载文件到本地,只是建立了一...
  • 微信小程序上传及预览文件

    千次阅读 2021-02-08 17:41:38
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 ...下面附上其可用属性以及可打开的文件类型二、预览文件的实现代码以上就是微信小程序中上传文件及预览文件的方法,这些在微信官方文档中都
  • 只要确保真机调试和调试状态下可以下载并预览文件即可,上线后即可预览成功
  • 微信小程序:预览PDF文件

    千次阅读 2020-02-26 15:20:56
    微信小程序直接预览PDF文件 官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.openDocument.html 代码: //打开pdf文件 wx.showLoading({ title: '加载中...', }) wx.downloadFile({...
  • PHP仿微信多图片预览上传

    千次阅读 2016-09-10 18:16:16
    PHP仿微信多图片预览上传,本文演示了手机微信端常用的多图片上传及时预览功能,点击上传的图片可立即删除。
  • 微信小程序预览模式的注意事项本地设置真机调试没有问题预览模式出错 本地设置 真机调试没有问题 预览模式出错 开发工具中的本地设置 不对 import ‘wepy-async-function’,可以用async-await
  • 一 首先用到的是pdftouch, 但是配置完之后用ie 谷歌都是运行的,但是扔到微信浏览器里,就是好用。 二 然后用的pdfobject 也支持。 三 最后开始研究的是pdf.js .下载pdf.js 然后找到官方实例,...
  • 微信小程序的文件预览 微信小程序的文件预览需要先使用wx.downloadFile下载文件,然后使用下载文件的临时路径通过wx.openDocument进行文件预览 项目中,有的需要打开pdf 来阅读信息。就需要用小程序自带的api...
  • 其中一个微信小程序通过预览或通过真机调试过程中,电脑会出现蓝屏的情况,使用其他微信小程序则不会,通过两个小程序对比和从网上查找资料得知,是因为该微信小程序的图片太多或图片大小太大,使其文件大小过大**,...
  • 想给单位做一个微信小程序,实现文件上传下载的功能,方便办事,也提高办事效率。 wx.downloadFile()获取到的文件缓存在手机上,iOS无法在手机预览这个缓存文件,安卓手机可以。 这个需要在调用downloadFile指定...
  • 微信开发者工具中,模拟器中可以正常显示,但是点击预览时,二维码出来,并有提示框(如下图)。 如上图的2框显示,提示的是英文,我才疏学浅,看懂(要加强英语的学习呀!!这样可以避免好多麻烦)。然后去...
  • 多说,先上图看下效果。 整体实现思路 图片展示:PhotoView(大图支持双击放大) 图片加载:Glide(加载网络图片、本地图片、资源文件) 小图变大图时的实现:动画 图片的下载:插入系统相册 该控件采用自定义...
  • 微信小程序文件预览(doc、ppt、pdf)

    万次阅读 2019-04-22 11:23:14
    url: filePath, //文件路径 header: {}, success: function (res) { console.log(res) var filePath = res.tempFilePath; console.log(filePath); wx.openDocument({ filePath: filePath...
  • 本来上周还好好的,今天突然发现小程序无法预览了,搞了半天才从微信文档得知原因,从微信开发者工具更新日志可知,增强编译会导致压缩包体积过大从而无法预览,真的坑爹!! 但是最新版的微信开发者工具已经没有了...
  • 思路: 先调用服务器接口,一个返回写入文件之后返回保存文件的下载目录URL的接口,之后再用微信官方API接口进行下载操作,下载完成后生成临时缓存目录,保存文件,操作保存指定位置之后进行文档打开预览 以上后端...
  • PHP仿微信多图片预览上传功能

    千次阅读 2017-01-16 15:37:20
    PHP仿微信多图片预览下载演示地址:http://www.erdangjiade.com/js/830 生产图片区域,上传按钮#btn可替换自己想要的图片     plupload上传 var uploader = new plupload.Uploader({//创建实例的构造方法...
  • 提示:因最近项目需求,项目需要用uniapp来开发微信小程序预览pdf的功能, 后端以链接形式返回pdf地址。 一、方法概述 开始用uniapp提供微信自带方法:wx.downloadFile({ }) + wx.openDocument({ }),但发现android...
  • 微信开发者工具预览报-2001错误

    千次阅读 2017-09-01 15:19:28
    只能说微信开发者工具还太成熟,需要填很多坑。解决方案直接说解决方案吧,卸载开发者工具,彻底卸载。 以mac为例,不要直接点dmg文件重装,没有用。要通过命令行方式完全卸载掉:cd ~/Library/Application\ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,453
精华内容 7,781
关键字:

微信不能预览文件