修复 PDF 文件预览报错问题、新增 Blob 对象支持（自动生成文件名）

package.json

@@ -51,6 +51,7 @@
     "copy-webpack-plugin": "^5.1.2",
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^7.20.0",
+    "file-loader": "6.2.0",
     "fs-extra": "^9.1.0",
     "highlight.js": "^9.17.1",
     "prettier": "^1.19.1",

packages/index.vue

@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { getExtend, readBuffer, render, fileDownload } from './util'
+import { getExtend, readBuffer, render, fileDownload, generateFilenameFromBlob } from './util'
 import EventBus from './util/EventBus'
 import { typeInfo } from './renders'
 import renders from './renders'
@@ -106,7 +106,7 @@ export default {
   props: {
     // 上传的地址
     fileUrl: {
-      type: [String, Object],
+      type: [String, Object, Blob],
       default: ''
     },
     // 是否显示头部
@@ -313,6 +313,8 @@ export default {
     },
     // 从file文件流加载
     loadFromBlob(file, options = {}) {
+      // 直接下载 Blob 文件
+      this.inputUrl = file
       // 保存配置项
       this.options = Object.assign(this.options, options)
 
@@ -336,10 +338,12 @@ export default {
     displayResult(buffer, file) {
       // 取得文件名
       const { name, type } = file
-      this.uploadFileName = name
+      if (!name && !this.uploadFileName) {
+        this.uploadFileName = generateFilenameFromBlob(file)
+      }
       // 取得扩展名并统一转小写兼容大写
       const extend =
-        this.extend || getExtend(name).toLowerCase() || type.split('/')[1]
+        this.extend || getExtend(this.uploadFileName).toLowerCase() || type.split('/')[1]
       // 生成新的dom
       const node = document.createElement('div')
       // 清空容器里的元素

packages/util.js

@@ -69,7 +69,7 @@ export function fileDownload(file, name) {
   }
 
   // file是url
-  if (file.indexOf('http') > -1) {
+  if (typeof file === 'string' && file.indexOf('http') > -1) {
     name = name ? name : getUrlFileName(file)
     const link = document.createElement('a')
     link.style.display = 'none'
@@ -147,3 +147,72 @@ export async function render(buffer, target, type, name) {
   }
   return renders.error(...arguments)
 }
+
+/**
+ * 使用时间戳为Blob文件生成文件名
+ * @param {Blob} blob 文件
+ **/
+export function generateFilenameFromBlob(blob) {
+  // MIME类型与扩展名映射表
+  const mimes = {
+    // 富文本文档
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'pptx',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xlsx',
+    'application/pdf': 'pdf',
+
+    // 图片
+    'image/gif': 'gif',
+    'image/jpeg': 'jpg',
+    'image/jpg': 'jpg',
+    'image/png': 'png',
+    'image/bmp': 'bmp',
+    'image/tiff': 'tiff',
+    'image/tif': 'tif',
+    'image/svg+xml': 'svg',
+
+    // 文本与代码
+    'text/plain': 'txt',
+    'application/json': 'json',
+    'text/javascript': 'js',
+    'application/javascript': 'js',
+    'text/css': 'css',
+    'text/html': 'html',
+    'text/markdown': 'md',
+    'application/xml': 'xml',
+    'text/xml': 'xml',
+    'text/x-java-source': 'java',
+    'text/x-python': 'py',
+    'text/typescript': 'ts',
+    'text/tsx': 'tsx',
+    'text/jsx': 'jsx',
+    'text/x-log': 'log',
+
+    // 视频
+    'video/mp4': 'mp4',
+    'video/webm': 'webm',
+    'video/ogg': 'ogv',
+
+    // 音频
+    'audio/mpeg': 'mp3',
+    'audio/mp3': 'mp3',
+    'audio/wav': 'wav',
+    'audio/ogg': 'ogg',
+  }
+
+  // 取出扩展名，如果找不到则用 bin 作为默认
+  const ext = mimes[blob.type]
+
+  if (!ext) {
+    throw new Error('不支持该类型的文件')
+  }
+
+  // 格式化时间戳（YYYYMMDD_HHmmss）
+  const timestamp = new Date().toISOString()
+    .replace(/[-:T]/g, '')    // 去掉 - : T
+    .split('.')[0]            // 去掉毫秒
+    .replace('Z', '')
+
+  // 拼出文件名
+  return `${timestamp}.${ext}`
+}

packages/vendors/pdf/PdfView.vue

@@ -15,7 +15,6 @@ import {
   PDFLinkService,
   PDFFindController
 } from 'pdfjs-dist/legacy/web/pdf_viewer'
-import PdfjsWorker from 'pdfjs-dist/legacy/build/pdf.worker'
 import './pdf.css'
 
 export default {
@@ -34,7 +33,8 @@ export default {
       typeof window !== 'undefined' &&
       'Worker' in window
     ) {
-      GlobalWorkerOptions.workerPort = new PdfjsWorker()
+      // GlobalWorkerOptions.workerSrc = `//unpkg.com/[email protected]/legacy/build/pdf.worker.min.js`
+      GlobalWorkerOptions.workerSrc = require('!!file-loader!pdfjs-dist/legacy/build/pdf.worker.min.js')
     }
   },
   mounted() {