不是加载外部的PDF文件，是当前页面的内容生成在线PDF预览效果

如果你希望在 Vue2 项目中将当前页面内容转换为在线 PDF 预览，而不是加载外部 PDF 文件，你可以使用前端的 PDF 工具库，例如 jsPDF 或 html2canvas 等。这里以 html2canvas 为例：

1. 首先，你需要安装 html2canvas 和一个字体库（如 @fontfaceobserver），因为 html2canvas 用于截图网页内容，而某些自定义字体可能需要额外处理：

   npm install html2canvas @fontfaceobserver

2. 在你的 Vue 组件中，使用计算属性来生成 PDF 并预览：

   <template>
     <button @click="generatePdf">生成 PDF</button>
     <el-dialog :visible.sync="previewVisible" width="80%" height="80%">
       <pdf-preview :blob="pdfBlob" />
     </el-dialog>
   </template>

   <script>
   import { promisify } from 'util';
   import html2canvas from 'html2canvas';
   import * as FFObserver from '@fontfaceobserver';

   async function generatePdf() {
     try {
       // 获取当前页面 HTML 内容
       const canvas = document.createElement('canvas');
       const context = canvas.getContext('2d');
       let htmlToCanvasPromise = promisify(html2canvas);

       // 解决 @fontface 观察者的问题
       await FFObserver.loadAsync('your-font-family-name');

       // 渲染到 canvas
       htmlToCanvasPromise(document.body).then(canvas => {
         this.pdfBlob = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpeg);base64,/, '');
         this.previewVisible = true;
       });
     } catch (error) {
       console.error('Error generating PDF:', error);
     }
   }

   export default {
     data() {
       return {
         previewVisible: false,
         pdfBlob: '',
       };
     },
   };
   </script>

3. 如果需要展示 PDF 预览，你需要使用一个支持 base64 图像的 PDF 查看组件，如 vue-pdf-viewer，或者手动下载生成的 blob，然后使用浏览器的内置 PDF 阅读器查看。