浙政钉H5开发问题总结

浙政钉H5开发问题总结

1.问题从何来？

最近在做浙政钉H5开发，遇到很多问题，问题导致的原因只有一个，那就是浏览器版本问题，众所周知，pc端浏览器chrome一统江湖，移动端浏览器群魔乱舞。如果只是这个，那倒也还没有什么。但是APP内置浏览器的版本由于各种原因，是低版本浏览器，所以开发路程艰辛。浙政钉安卓浏览器是低版本UC浏览器、苹果版是低版本Safari浏览器。

2.VUE3+Vite页面打开空白

Vue3+vite代码版本比较高，浏览器版本比较低。需要对代码进行降低版本处理。可以使用Vite官方插件@vitejs/plugin-legacy。

https://cn.vitejs.dev/plugins/

import legacyPlugin from '@vitejs/plugin-legacy';
 plugins: [ 
      legacyPlugin({
        targets:['defaults', 'ie >= 11','chrome 52'],  // 需要兼容的目标列表，可以设置多个
        additionalLegacyPolyfills:['regenerator-runtime/runtime'], // 面向IE11时需要此插件
        modernPolyfills: true,
      })
    ],

3.文件上传失败问题

文件预览失败主要出现在ios版浙政钉上，浏览器会自动把发送FormData类型的数据的Post请求的Content-Type设置为application/json，导致后端无法解析出正确的数据来。所以这里就不能使用请求头为Content-Type:multipart/form-data; 还有一点需要注意 onUploadProgress 方法在ios版浙政钉浏览器上不生效。如下为正确事例，设置请求头为application/json，文件类型传ArrayBuffer。

export function fileChunkUploadCheck( data ) {
  return request({
    url: "",
    method: "post",
    data: data,
    headers: { 
      'Content-Type': 'application/json',
    },
    timeout: 100000,
    onUploadProgress: progressEvent => {
    },
  });
}

function fileToArrayBuffer ( file ) {
   return new Promise( function ( resolve ) {
     var fileReader = new FileReader();
     fileReader.readAsArrayBuffer( file );
     fileReader.onload = function  ( e ) {
       resolve(e.target.result);
     };
   });
 }

4.vue——router 出现跳转问题

当时的报错页面我已经忘掉了，我这里使用了统一的粗暴方法，降低ECMAScript版本。在vite.config.js 中添加如下配置。

build: {
      target: 'es2015',
     }
 }

5.pdf-dist出现问题

pdf-dist是一个很难搞的库，加上较低的浏览器版本，真的是难上加难，还好运气逆天，我摸索出了解决方案。
首先是版本 “pdfjs-dist”: “^2.3.200”，为什么使用这个版本呢首先，先看下载量，是一个还不错的数量

再加上一张我从网上扣的图

所以我选择了这个版本。
然后就是两点注意
第一点：PDFJS.GlobalWorkerOptions.workerSrc 引入的文件请使用 pdf.worker.min.js。
第二点：使用getDocument()方法的时候处理异常。

// 1
import * as PDFJS from 'pdfjs-dist'; 
PDFJS.GlobalWorkerOptions.workerSrc = import.meta.env.BASE_URL + 'pdf.worker.min.js';

// 2
async function loadFile(url) {

      let loadingTask;
      try {
        loadingTask = PDFJS.getDocument(url);
      } catch (error) {
        if (String(error).indexOf('response.body.getReader') > -1) {
          // 某些浏览器内核不支持 Fetch - response.body.getReader 的模式，专门在这里修复
          const pdfData = await fetch(
            new URL(url, window.location).href,
          );
          const arrayBufferPdf = await pdfData.arrayBuffer(); // 转成 ArrayBuffer 塞给 pdf.js
          loadingTask = await PDFJS.getDocument({ data: arrayBufferPdf }).promise;
        }
      }
      
      loadingTask.promise.then(pdf => {
        pdfDoc = pdf;
        Pobj.pdfPages = pdf.numPages;
        nextTick(() => { 
          renderPage(1);
        });
      }); 
    }

最后附上我参考的文章链接：
移动端使用pdfjs-dist来预览pdf文件的一些坑
multipart/form-data 类型HTTP请求详解
Pdf.js body.getReader 报错问题