微信小程序pdf、图片预览

一、pdf预览 

1.示例图 

2.代码

fileId：要预览的pdf文件的id 

 viewsFiles(e) {
    wx.showLoading({
      title: '加载中...'
    });
    let fileId = e.currentTarget.dataset.id.fileId
    // 获取数据官方方法是 wx.request ，大家自行修改
    var params = {
      url: "/common/getFile/" + fileId ,//后端提供的接口
      method: "GET",
      responseType: "arraybuffer",
      callBack: (res) => {
        console.log(res)

        // ---------------重点主要是这一块-------------------
        const fs = wx.getFileSystemManager(); //获取全局唯一的文件管理器
        fs.writeFile({
          // 写文件
          filePath: wx.env.USER_DATA_PATH + "/" + '文件名.pdf', // wx.env.USER_DATA_PATH 指定临时文件存入的路径，后面字符串自定义
          data: res,
          encoding: "binary", //二进制流文件必须是 binary
          success(res) {
            wx.openDocument({
              // 新开页面打开文档
              filePath: wx.env.USER_DATA_PATH + "/" + '文件名.pdf', //拿上面存入的文件路径
              showMenu: true, // 是否显示右上角菜单（3个点）
              success: function (res) {
                setTimeout(() => {
                  wx.hideLoading();
                }, 500);
              },
            });
          },
        });

      }
    }
    http.request(params)
  },

console.log(res) 打印的内容：

后端接口返回的内容样式：

二、图片预览

1.点击名称，预览图片 

2.代码

因为新版本wx.arrayBufferToBase64已被废弃，故用base64-js替代：

（1）npm安装base64-js： npm i base64-js

（2）将文件内容复制，放到 utils 文件夹下面的 base64.js文件中

var base64 = require("../../utils/base64.js");


showDetail(e) {
    let fileId = e.currentTarget.dataset.item.fileId
    wx.showLoading({
      title: '加载中...'
    });
    // 获取数据官方方法是 wx.request ，大家自行修改
    var params = {
      url: "/common/getFile/" + fileId , //后端提供的接口
      method: "GET",
      responseType: "arraybuffer",
      callBack: (res) => {
        // let url = "data:image/png;base64," + wx.arrayBufferToBase64(res)
        let base = base64.fromByteArray(new Uint8Array(res))
        let url = "data:image/png;base64," + base
        wx.previewImage({
          current: url, // 当前显示的图片
          urls: [url] // 需要预览的图片列表
        })
        //停止loading
        wx.hideLoading();
      }
    }
    http.request(params)
},