无法集成 PDF，不知道是bug归属哪里？(Vite? vue3?)

[M69W]

⚠️ 重要 ⚠️ 在进一步操作之前，请检查下列选项。如果您忽视此模板或者没有提供关键信息，您的 Issue 将直接被关闭

• 已阅读 文档.
• 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
• 已在 Issues 中搜索了相关的关键词
• 不是 ant design vue 组件库的 Bug

描述 Bug

想使用pdfjs-dist实现在线预览PDF 功能。 在我们这个框架中做了以下操作：

"dependencies": {
    "pdfjs-dist": "2.10.377",

参考代码： https://codesandbox.io/s/f6qss?file=/src/components/PdfViewer.vue

在项目中这个页面 /src/views/demo/excel/CustomExport.vue 复制以上代码:

<template>
  <PageWrapper title="导出示例" content="可以选择导出格式">
    <div id="pageContainer">
      <div id="viewer" class="pdfViewer"></div>
    </div>
  </PageWrapper>
</template>

<script lang="ts">
  import { defineComponent, onMounted } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import pdfjsLib from "pdfjs-dist/build/pdf";
  import { PDFViewer } from "pdfjs-dist/web/pdf_viewer";
  import "pdfjs-dist/web/pdf_viewer.css";
  import demo from '/@/views/demo/excel/pdf-sample.pdf';

  pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.10.377/build/pdf.worker.min.js";

  export default defineComponent({
    components: { BasicTable, PageWrapper },
    setup() {
      async function getPdf(path) {
        let container = document.getElementById("pageContainer");
        let pdfViewer = new PDFViewer({
          container: container
        });
        let loadingTask = pdfjsLib.getDocument('pdf-sample.pdf');
        let pdf = await loadingTask.promise;
        pdfViewer.setDocument(pdf);
      }

      onMounted(async () => {
        const path = (await (await import.meta.globEager('/@/views/demo/excel/pdf-sample.pdf')).default) as any;
        getPdf(path);
      });

      return {
        demo,
      };
    },
  });
</script>

运行后出现以下报错： 弹窗报错：

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .pdf file format.
/Users/abc/Desktop/git/vue-vben-admin/src/views/demo/excel/pdf-sample.pdf:6:65
4  |  << /Length 5 0 R /Filter /FlateDecode >>
5  |  stream
6  |  x
�Z�n��W�nH�jw���҉���  d�̂�(��ĖI���sιu�d�1CÀ����}���O��)�e>�g����b:��i5ʧ��$��"-拰߄_�.���P��!�wX������C���b6O��m��  ��s�an��(G�\�r����Q9ΫY1մ�N1Ζ���rY�2,¯a��~n�*j�E��qǀq<
�0,�`��Q���S�x��:M���6��;����[��)�;�a�WX�3�})5���LC��j�0_��1Z��Q1��Q��a�0�Z4B-�4K�!���#�3�� `~�P�֡�P/ƌj���u7��k�{�v�/��x��YC���r\rV�G~\.���~�N�s��F�����
Ι�E8?�9�]  Ϋ�sN�"c�����2'���܈�?�[��珑���D���N�b8�>w� �B��|gbe�0.�K�>��3��3N��4=��t��Aa� �-L
\�Ѓ�;����þ�D��7�a>�:
   |                                                                  ^
7  |  ݀"��}S�I�3�x$&��Ì�����5�f��/����Ĕ]
3M�#��!�B�:(�:��IE[dF���t�    �"덶��8w_��ہ9� �Y�����(J��a,i�I
~z���fN!�H�� o�`>�`󒕁�OFp�I��u��
8  |  ���Y�8|Q�>V�&�C�"GQS�c��E:`W-�q4�u5*-���2�a)�)�a����C�B#t"L�Q��ÈY���W��b��hĹs��wdɚ���,��
    at formatError (/Users/abc/Desktop/git/vue-vben-admin/node_modules/vite/dist/node/chunks/dep-c2aeb4fc.js:51132:46)
    at TransformContext.error (/Users/abc/Desktop/git/vue-vben-admin/node_modules/vite/dist/node/chunks/dep-c2aeb4fc.js:51128:19)
    at TransformContext.transform (/Users/abc/Desktop/git/vue-vben-admin/node_modules/vite/dist/node/chunks/dep-c2aeb4fc.js:74605:22)
    at async Object.transform (/Users/abc/Desktop/git/vue-vben-admin/node_modules/vite/dist/node/chunks/dep-c2aeb4fc.js:51333:30)
    at async transformRequest (/Users/abc/Desktop/git/vue-vben-admin/node_modules/vite/dist/node/chunks/dep-c2aeb4fc.js:67162:29)
    at async viteTransformMiddleware (/Users/abc/Desktop/git/vue-vben-admin/node_modules/vite/dist/node/chunks/dep-c2aeb4fc.js:67305:32
Click outside or fix the code to dismiss.
You can also disable this overlay with hmr: { overlay: false } in vite.config.js.

控制台报错：

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://localhost:3100/src/views/demo/excel/pdf-sample.pdf?import

TypeError: Failed to fetch dynamically imported module: http://localhost:3100/src/views/demo/excel/CustomExport.vue

复现 Bug

"dependencies": {
    "pdfjs-dist": "2.10.377",

参考代码： https://codesandbox.io/s/f6qss?file=/src/components/PdfViewer.vue

系统信息

• 操作系统: 10.15.7 (19H1323)
• Node 版本: v14.17.2
• 包管理器 (npm/yarn/pnpm) 及其版本: yarn (1.22.10)

[M69W]

暂时就发现这个能用 https://github.com/Lanseria/vue-pdf-useinvite

PS: 如果照搬网上普通用法均挂.

[mynetfan]

该错误是因为Vite默认情况下未将*.pdf当作资源文件引起的。请参考vite文档修改配置即可。

[M69W]

暂时就发现这个能用 https://github.com/Lanseria/vue-pdf-useinvite

PS: 如果照搬网上普通用法均挂.

<template>
  <PageWrapper>
    <pdf-editor
    width=”100vh“
    src='pdf-sample.pdf'
  ></pdf-editor>
  </PageWrapper>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { PdfEditor } from "@lanseria/vue-pdf-vite"; // 编辑
  import test from "./pdf-sample.pdf?url"; // pdf-sample.pdf放【public】路径下， 需要设置【?url】，注意跟 【pdf-sample.pdf】对应

  export default defineComponent({
    components: { PdfEditor, PageWrapper },
    setup() {
      return {
        test
      };
    },
  });
</script>

[M69W]

效果在这个框架略异常，如果跑这个插件提供的示例，如下，估计要改下才正常使用。