The Feishu applet calls the picture preview function (picture+pdf)

Using the API preview function provided by the Feishu applet can only preview ordinary pictures.
If you want to open the pdf, you need to call the download and open file methods.

html

<view tt:for="{
     
     {item.picList}}" tt:for-item="imgItem" class="imgItem">
	<image class="imgValue" src="{
     
     {imgItem}}" data-img="{
     
     {imgItem}}" data-picList="{
     
     {item.picList}}" catchtap="_imagePreview"/>
</view>

js

// 预览
    _imagePreview(ev) {
    
    
        console.log('==_imagePreview:', ev.currentTarget.dataset)
        let img = ev.currentTarget.dataset.img;
        let picList = ev.currentTarget.dataset.picList;

        // 判断是不是pdf
        const is_pdf = img.indexOf('.pdf') !== -1
        console.log('==>is_pdf', is_pdf, img, 'encodeURI:', encodeURI(img))

        is_pdf
        // 打开文档 针对pdf 先下载到本地
        ? tt.downloadFile({
    
    
          // 示例 url
          url: encodeURI(img),
          success(res) {
    
    
            console.log('==downloadFile res:', res)
            // 拿到本地地址后打开pdf
            const filePath = res.tempFilePath;
            tt.openDocument({
    
    
              filePath: filePath,
              success(res1) {
    
    
                console.log('打开文档成功', res1);
              }
            });
          }
        })
        // 图片预览
        : tt.previewImage({
    
    
          current: img,
          urls: picList.filter(imgItem => imgItem.indexOf('.pdf') === -1),
          success: res => {
    
    
            console.log(JSON.stringify(res));
          },
          fail: res => {
    
    
            this._showToast(`预览失败: ${
      
      res.errMsg}`);
            console.log('预览失败', res);
          }
        });
      },
      _showToast(msg, icon) {
    
    
        tt.showToast({
    
    
          title: msg,
          icon: icon || 'error',
          duration: 2000
        });
        console.error(msg);
      },

The following is the entry of the Feishu development document. You can search for the corresponding API through the keyword search function in the upper right corner
http://open.work.sany.com.cn/document/uYjL24iN/ucDMx4yNwEjL3ATM

Guess you like

Origin blog.csdn.net/weixin_34403976/article/details/128674628