Vue3 + ts + vite H5在线预览

先说怎么实现解决的：

https://www.npmjs.com/package/vue3-pdf-app

安装：npm install vue3-pdf-app

<template>

  <vue-pdf-app style="height: 100vh" :pdf="url" :config="config"></vue-pdf-app>

</template>

import VuePdfApp from "vue3-pdf-app";

import "vue3-pdf-app/dist/icons/main.css";

import { useRoute } from "vue-router";

const route = useRoute();

const pdfUrl = route.query.pdfUrl?route.query.pdfUrl:""

const url = `${localStorage.getItem(

  "download_url"

)}${pdfUrl}`;

//配置设置

const config = {

  sidebar: false, // 禁用侧边栏（包含导航面板）

  toolbar: {

    toolbarViewerLeft: false

  },

  secondaryToolbar: false

};

关于这个功能一开始是做成很简单的方式，使用浏览器新开链接直接下载再预览：

window.open(`${localStorage.getItem("download_url")}${row.url}`, "_blank")

一句话的事情，问题是苹果手机不会直接下载，会有一个预览模式，安卓机只能下载再预览，客户希望能统一预览，不下载也行。

响应用户需求做成在线预览形式，我使用的是vite vue3+ts版本的项目，一开始问了deepseek,

使用pdf.js的插件来做该需求，但是会反复遇到兼容，配置的问题

npm install pdfh5@1.4.4

npm install pdfjs-dist@2.16.105

1. reportPdf.vue? [sm]:114 PDF加载失败: Error: Setting up fake worker failed: "Unexpected token '{'".

at index.mjs:10901

2. pdf.min-XBTCTOYT.js?v=10000898:10600 Uncaught (in promise) TypeError: Promise.withResolvers is not a function

at new _PDFDocumentLoadingTask (pdf.min-XBTCTOYT.js?v=10000898:10600)

at Module.getDocument (pdf.min-XBTCTOYT.js?v=10000898:855)

at Pdfh5.renderPdf (pdfh5.js?v=10000898:941)

at Pdfh5.loadPDF (pdfh5.js?v=10000898:906)

at Pdfh5.init (pdfh5.js?v=10000898:718)

基本上是这两个问题之间反复出错，我甚至开始怀疑ai,怀疑自己的能力，陷入了死局；下班很久了，我突然清醒过来，这是一种自我伤害的行为，立刻下班，先让大脑休息好，再开始。

接下来，我询问了周围一位经常与小程序打交道的同事; 很简单，也是几句话的事情。

我感觉，职场里面心态，沟通，学习的精神是大于当前技能是否有多强的，人总是有累，知识盲区的时候。