Wechat applet wxprase contains files that cannot be solved by clicking

This rookie encountered this problem yesterday , At first, I searched everywhere and found no solution , I wanted to change my way ： Let the back end directly send me the name and address of the file , I will display it on the interface according to whether the field exists , But it's troublesome for the backend to change , So it's still a rookie to solve ！

I found one webview, I feel that it is very possible to solve , But found that it does not support individual users , I'm going to press you directly , Later, seeing this article gave me ideas , In rich text content pdf file , How to use wxparse Click the event to open the preview ？

But this does not solve the problem , Just give the rookie a thought , Since the WxPrase Not in it , Then why not take it out and display it on the page as an attachment , Although there will be a feeling of repetition , But at least the problem is solved ！

1、 How to make HTML Get the file through regular ？

The rookies here are not very familiar , Can only search around , I haven't found a reliable one , Then I can only grope on this website Online regular expression testing , There is a match on it URL, But it doesn't work , Finally, it's the rookie watching regular , I wrote a ！

const reg = new RegExp('href="https://[^\\s]*?"');

This can be , But I don't know which file it corresponds to when I find the matching address , Later, rookies found that the back-end was passed by a rich text compiler HTML There are certain rules ,href It's followed by title, So the code becomes like this

const reg = new RegExp('href="https://[^\\s]* title="[\\s\\S]*?"');

This solution is solved , But you can only match one at a time , Then the rookie thought of global matching , The code is as follows

const reg = new RegExp('href="https://[^\\s]* title="[\\s\\S]*?"',"g");
let a = reg.exec(input);

But disappointingly , This global search does not work properly . ( The rookie here doesn't know why , Readers who hope to understand point out , Encouraging words ！)

When the rookie is at an impasse , The back end says ： Since I can't , Then take it circularly , It's good to replace what you take out every time you take it ！ So the code becomes like this

let arr = [];
let input =test.content;
while(1){
    
  const reg = new RegExp('href="https://[^\\s]* title="[\\s\\S]*?"');
  let a = reg.exec(input);
  if(a == null){
    
    break;
  }
  arr.push(a);
  input = input.replace(a," ");
}
console.log(arr);

Then it was successfully taken out , Perfect ！

2、 Data processing

It's not enough to take it out , You have to show the page , Then we have to process the data

let AppdList = [];
for(let i = 0;i < arr.length;i++){
    
  let ApList = [];
  //  This is a href and title Separate 
  let href_title = arr[i][0].split(" ");
  
  //  Some names are not standardized , Just splice it back 
  if(href_title.length > 2){
    
    let title = "";
    for(let j = 1;j < href_title.length;j++){
    
      title = title + href_title[j];
    }
    ApList[0] = href_title[0].split("=")[1].split('"')[1];
    ApList[1] = title.split("=")[1].split('"')[1];
  }else{
    
    ApList[0] = href_title[0].split("=")[1].split('"')[1];
    ApList[1] = href_title[1].split("=")[1].split('"')[1];
  }

  AppdList.push(ApList);
  // console.log(ApList);
  // console.log(AppdList);
}

this.setData({
    
  AppendicesList:AppdList,
});

Be careful

There's a catch , That is, the string should be printed without quotation marks , Quotation marks indicate that the string itself is quoted , To use split(’"’)[1] With the ！

3、 Interface display and events

wxml

<!--  Add attachments  -->
<view wx:if="{
     {show && AppendicesList.length > 0}}" class="AppendicesList box">
  <view>
    <text style="color: #555;" bindtap="showAppendices"> Stow attachments :</text>
  </view>
  <block wx:for="{
     {AppendicesList}}">
    <text class="Appendices" bindtap="downLoad" data-href="{
     {item[0]}}">{
   {item[1]}}\n</text>
  </block>
</view>
<view wx:if="{
     {!show}}" class="AppendicesList">
  <text class="show" bindtap="showAppendices"> See attachment </text>
</view>

wxss

/*  Add attachments  */
.AppendicesList{
    
  /* text-align: center; */
  margin-bottom: 20rpx;
}
.box{
    
  background-color: gainsboro;
  border: solid #333 5rpx;
}
.show{
    
  text-decoration: underline;
  color:#555;
}
.Appendices{
    
  position: relative;
  color: rgb(14, 122, 247);
  font-size: 35rpx;
  text-decoration: underline;
  line-height: 60rpx;
  padding-left: 30rpx;

  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;  /* Append this line of code */
}
.Appendices::before{
    
  content: "";
  position: absolute;
  left: 6rpx;
  top: 45%;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: #333;
}

js

showAppendices:function(){
    
  this.setData({
    
    show:!this.data.show,
  })
},

downLoad:function(e){
    
  // console.log(e);
  wx.showToast({
    
    title: ' Joined the download queue ',
    icon:"success",
    duration:2000,
    mask:true
  });

  //  This is also the pit at the back , At that time, rookies simply didn't know why they couldn't visit , I didn't know until I asked the backend , This  cn//  It's back-end , But only through  cn/  visit 
  let href = e.currentTarget.dataset.href.replace("cn//","cn/");
  wx.downloadFile({
    
    url: href,
    success (res) {
    
      //  As long as the server has response data , It will write the response to the file and enter the  success  Callback , The business needs to decide whether it has downloaded the desired content 
      console.log(res);
      const filePath = res.tempFilePath
      wx.openDocument({
    
        filePath: filePath,
        success: function (res) {
    
          console.log(' Successfully opened the document ');
        }
      })
    },
    fail(err){
    
      console.log(err);
    }
  })
},

Show the effect


Rookies feel like they want no repetition , We need to change the back end together , The front end is changed , This is the limit ！