使用antd-mobile实现登录预览的移动端网页

最近接了一个新需求，写一个移动端的网页，要求使用antd-mobile，总结一下遇到的一些问题
1.根据高保真设置页面logo，图片的宽度和高度，可以使用rem作为单位实现自适应
参考这篇简书文章：https://www.jianshu.com/p/16cfeb265525
2.签署的文件需要以pdf格式在线预览，后台返回的是一个二进制流，请求的后台的代码：

fetch(`${url}`,{
  method:"GET",
  responseType: 'blob',
  mode:"cors",
  headers:{
    "Content-Type":"application/pdf;charset=utf-8"
  }
}).then(res=>{
  if(res.status === 200){
     let blob = new Blob([res], {
            type: 'application/pdf;chartset=UTF-8'
          })
         
     let fileURL = URL.createObjectURL(blob)
   }
})

后台返回的data数据

image

直接使用

window.open(res.url)

弹出一个新窗口，可以加载pdf文件，实现在线预览，但是在安卓手机是直接将pdf下载到手机中，ios系统的手机是点了没反应，后来百度，苹果手机对window.open过滤了，不会执行，后来用window.location.href = res.url,在苹果手机上可以预览，但是安卓手机依然会先下载，继续尝试使用react-pdf，没有反应，后面又尝试用了react-pdf-js

import React from 'react';
import PDF from 'react-pdf-js';
render(){
<div>
  <PDF
          file={fileURL}//这里用了blob转换过的地址（只展示了部分代码）
          onDocumentComplete={this.onDocumentComplete}
          page={this.state.page}
        />
        {pagination}
      </div>
}

image.png

用的地址不对，会报这个错后来改成file={res.url}然后就出现pdf的文件了，但是只显示pdf一页的内容，还需要分页

  onChange = (current,total)=>{
     this.setState({ page: current });
     console.log(current);
  }
 onDocumentComplete = (pages) => {
    this.setState({ page: 1, pages });
  }
  renderPagination = (page, pages) => {
    console.log(pages);
    return (
      <nav>
        <Pagination onChange={this.onChange} total={pages*10} />
      </nav>
    );
  }
render(){
let pagination = null;
    if (this.state.pages) {
      pagination = this.renderPagination(this.state.page, this.state.pages);
    }
  <div className={styles.contract}>
        {storage.getItem("filePath")?<PDF
          file={storage.getItem("filePath")}
          onDocumentComplete={this.onDocumentComplete}
          page={this.state.page}
          scale={0.7}
        />:null}
{pagination}
</div>
}

手动进行分页，点击上一页下一页可以看到pdf的所有页数

还有一个方法可以不用手动分页，直接预览所有页的pdf：react-file-viewer，用法也很简单

import FileViewer from 'react-file-viewer';
<FileViewer
        fileType={"doc"}//需要预览的文件格式
        filePath={file}
        errorComponent={CustomErrorComponent}
        onError={this.onError}/>

（如果pdf上有盖章或者签字的话，这两个插件是无法显示印章和签字）
react-file-viewer具体使用可看官方api：https://www.npmjs.com/package/react-file-viewer