vue-pdf放在本地

引用\[1\]:如果你想将vue-pdf放在本地，你可以使用以下步骤:
1. 首先，你需要安装vue-pdf。你可以使用npm或yarn来安装，命令如下:
- 使用npm: `npm install vue-pdf -S`
- 使用yarn: `yarn add vue-pdf`
2. 将你的本地PDF文件放在项目的static目录下。
3. 在你的Vue组件中，引入vue-pdf，并在template中使用pdf组件来显示PDF文件。你可以使用v-for循环来显示多页PDF文件。以下是一个示例代码:

   <template>
     <div class="super-flow-base-demo">
       <pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="display: inline-block; width: 100%; overflow: hidden; overflow-y: scroll;"></pdf>
     </div>
   </template>
   
   <script>
   import pdf from 'vue-pdf'
   let loadingTask = pdf.createLoadingTask('./../../static/pdfwwcc.pdf')
   
   export default {
     components: {
       pdf
     },
     data() {
       return {
         src: loadingTask,
         numPages: undefined,
       };
     },
     created() {
     },
     mounted() {
       // 获取总页数
       this.src.promise.then(pdf => {
         this.numPages = pdf.numPages;
       });
     },
     methods: {
     },
   };
   </script>

引用\[2\]:如果你遇到了字体库无法加载的问题，你可以将字体库放到本地。以下是一个示例代码:

// 引入vue-pdf
import pdf from 'vue-pdf'

// 创建加载任务
let loadingTask = pdf.createLoadingTask({
  url: src,
  cMapUrl: '../../assets/pdfjs-dist/cmaps/',
  cMapPacked: true
})

// 在组件中使用loadingTask
export default {
  components: {
    pdf
  },
  data() {
    return {
      src: loadingTask,
      numPages: undefined,
    };
  },
  // ...
}

引用\[3\]:如果你仍然遇到无法解析中文的问题，你可以引入CMapReaderFactory来解决。以下是一个示例代码:

// 引入vue-pdf
import pdf from 'vue-pdf'
// 引入CMapReaderFactory
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";

// 创建加载任务
let loadingTask = pdf.createLoadingTask({
  url: src,
  cMapUrl: '../../assets/pdfjs-dist/cmaps/',
  cMapPacked: true,
  CMapReaderFactory
})

// 在组件中使用loadingTask
export default {
  components: {
    pdf
  },
  data() {
    return {
      src: loadingTask,
      numPages: undefined,
    };
  },
  // ...
}

希望这些信息对你有帮助！
#### 引用[.reference_title]
- *1* [vue-pdf使用及遇到的问题总结，ios使用vue-pdf会有白屏的bug](https://blog.csdn.net/qq_41314448/article/details/130803740)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue-pdf使用+分页预览(踩坑 + 使用本地字体库)](https://blog.csdn.net/qq_35620498/article/details/124839037)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]