Vue3 pdf移动端预览踩坑

尝试过的组件  @vue-office/pdf;pdfh5;vue-pdf

@vue-office/pdf无法适配ios 在设备iPhone11 ，xs ，14pro，分别存在，自行跳转，展示有标签，无内容；安卓正常显示

使用相对简单，没遇到问题  

<VueOfficePdf :src="pdfurl" class="pdf" style="height: 80vh;"    

          @rendered="rendered" @error="errorHandler" >

</VueOfficePdf> -->

import VueOfficePdf from "@vue-office/pdf";

若文件流   请求使用

axios.request({

      method: "GET", 

      url: props.url,//路径

      responseType: "blob", //告诉服务器想到的响应格式

      headers: {

        "Content-Type": "application/pdf;charset=UTF-8",

        'Mdzh_saas_auth_x_token': G.token

      },

    }).then((res) => {

      console.log(res);

      if (res) {

        // 访问方式1

        let blob = new Blob([res.data], { type: "application/pdf" });

        const url = URL.createObjectURL(blob);

        console.log('PDFurl:::', url);

        closeToast()

        loading.value = false;

        pdfurl.value = url;

        // })

        // 访问方式2

        // res.data.arrayBuffer().then(res1 => {

        // pdfurl.value = res1

        // closeToast()

        // loading.value = false;

        // console.log('PDFurl:::', pdfurl.value);

        //   console.log('res1', res1);

        // })

        // 访问方式3

        // let file = new File([res.data], props.name)

        // let fileReader = new FileReader()

        // fileReader.readAsArrayBuffer(file)

        // fileReader.onload =  () => {

        //   pdfurl.value = fileReader.result

        //   closeToast()

        //   loading.value = false;

        //   console.log('PDFurl-file:::', pdfurl.value);

        // }

      } else {

        // Message.error({ title: "失败", message: "接口请求失败" });

        loading.value = false;

        viewError()

      }

    })

即可预览pdf

pdfh5在@vue-office/pdf组件存在兼容问题，另寻他法，找到pdfh5组件，下载在引入时，一团报错

关于webpack报错

If you want to include a polyfill, you need to:     - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'     - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this:     resolve.fallback: {

 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }' - install 'util' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "util": false }

 引入node-polyfill-webpack-plugin

npm install node-polyfill-webpack-plugin

在webpack.config.js中添加配置

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

configureWebpack: {

    resolve: { fallback: { fs: false } },

    plugins: [

      new NodePolyfillPlugin()

    ],

  },

解决webpack问题，接下来又遇到canvas，web-streams-polyfill，dommatrix报错问题，下载依赖，

npm install  --save canvas dommatrix web-streams-polyfill

在下载canvas时，一直转圈，卡了几分钟。

尝试使用cnpm 解决问题。

使用代码

<div id="pdfShow"></div>

 nextTick(() => {

          const pdfh5 = new pdfH5('#pdfShow', {

            pdfurl: url, //blob 路径也可

            // renderType:'svg'

          });

          pdfh5.on("complete", function (status, msg, time) {

            console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)

            //closeToast()

          })

        })