|
@@ -7,8 +7,16 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-import { getDocument } from 'pdfjs-dist/build/pdf'; // 用于加载文档
|
|
|
|
|
|
|
+// import { getDocument } from 'pdfjs-dist/build/pdf'; // 用于加载文档
|
|
|
import * as pdfjsLib from 'pdfjs-dist/web/pdf_viewer'; // 获取全局配置接口
|
|
import * as pdfjsLib from 'pdfjs-dist/web/pdf_viewer'; // 获取全局配置接口
|
|
|
|
|
+import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/build/pdf';
|
|
|
|
|
+import workerBundle from 'pdfjs-dist/build/pdf.worker.entry';
|
|
|
|
|
+
|
|
|
|
|
+// ✅ 关键配置:显式设置Worker路径并启用中文字体支持
|
|
|
|
|
+GlobalWorkerOptions.workerSrc = workerBundle.default;
|
|
|
|
|
+GlobalWorkerOptions.cMapUrl = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/cmaps/';
|
|
|
|
|
+GlobalWorkerOptions.cMapPacked = true;
|
|
|
|
|
+
|
|
|
export default {
|
|
export default {
|
|
|
name: "pdfViewer",
|
|
name: "pdfViewer",
|
|
|
// props: {
|
|
// props: {
|
|
@@ -25,25 +33,32 @@ export default {
|
|
|
},
|
|
},
|
|
|
async mounted() {
|
|
async mounted() {
|
|
|
try {
|
|
try {
|
|
|
- // ✅ 关键步骤:动态加载 Worker 脚本并设置路径
|
|
|
|
|
- const workerBundle = await import('pdfjs-dist/build/pdf.worker.entry');
|
|
|
|
|
- pdfjsLib.GlobalWorkerOptions.workerSrc = workerBundle.default;
|
|
|
|
|
-
|
|
|
|
|
- // 可选:配置中文字体支持(解决乱码问题)
|
|
|
|
|
- pdfjsLib.GlobalWorkerOptions.cMapUrl = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/cmaps/';
|
|
|
|
|
- pdfjsLib.GlobalWorkerOptions.cMapPacked = true;
|
|
|
|
|
-
|
|
|
|
|
- // 发起文档加载请求
|
|
|
|
|
- console.log(this.src,'src浏览的地址内容')
|
|
|
|
|
const docPromise = getDocument({ url: this.src, withCredentials: true });
|
|
const docPromise = getDocument({ url: this.src, withCredentials: true });
|
|
|
this.pdfDoc = await docPromise.promise;
|
|
this.pdfDoc = await docPromise.promise;
|
|
|
- await this.renderPage(this.pageNum); // 触发渲染
|
|
|
|
|
- this.loading = false;
|
|
|
|
|
|
|
+ await this.renderPage(1); // 默认加载第一页
|
|
|
} catch (err) {
|
|
} catch (err) {
|
|
|
- console.error("PDF初始化失败:", err);
|
|
|
|
|
- this.errorMsg = `无法加载PDF文件 (${err.message})`;
|
|
|
|
|
- this.loading = false;
|
|
|
|
|
|
|
+ console.error("PDF加载失败:", err); // 此处应能捕获到具体的错误堆栈
|
|
|
}
|
|
}
|
|
|
|
|
+ // try {
|
|
|
|
|
+ // // ✅ 关键步骤:动态加载 Worker 脚本并设置路径
|
|
|
|
|
+ // const workerBundle = await import('pdfjs-dist/build/pdf.worker.entry');
|
|
|
|
|
+ // pdfjsLib.GlobalWorkerOptions.workerSrc = workerBundle.default;
|
|
|
|
|
+ //
|
|
|
|
|
+ // // 可选:配置中文字体支持(解决乱码问题)
|
|
|
|
|
+ // pdfjsLib.GlobalWorkerOptions.cMapUrl = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/cmaps/';
|
|
|
|
|
+ // pdfjsLib.GlobalWorkerOptions.cMapPacked = true;
|
|
|
|
|
+ //
|
|
|
|
|
+ // // 发起文档加载请求
|
|
|
|
|
+ // console.log(this.src,'src浏览的地址内容')
|
|
|
|
|
+ // const docPromise = getDocument({ url: this.src, withCredentials: true });
|
|
|
|
|
+ // this.pdfDoc = await docPromise.promise;
|
|
|
|
|
+ // await this.renderPage(this.pageNum); // 触发渲染
|
|
|
|
|
+ // this.loading = false;
|
|
|
|
|
+ // } catch (err) {
|
|
|
|
|
+ // console.error("PDF初始化失败:", err);
|
|
|
|
|
+ // this.errorMsg = `无法加载PDF文件 (${err.message})`;
|
|
|
|
|
+ // this.loading = false;
|
|
|
|
|
+ // }
|
|
|
},
|
|
},
|
|
|
methods:{
|
|
methods:{
|
|
|
async loadNewDocument(newSrc) { // 新增的核心方法!
|
|
async loadNewDocument(newSrc) { // 新增的核心方法!
|