引用\[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，并在tem
plate中使用pdf组件来显示PDF文件。你可以使用v
-for循环来显示多页PDF文件。以下是一个示例代码:
```html
<tem
plate>
<div class="super
-flow
-base
-demo">
<pdf v
-for="i in numPages" :key="i" :src="src" :page="i" style="dis
play: inline
-block; width: 100%; overflow: hidden; overflow
-y: scroll;"></pdf>
</div>
</tem
plate>
<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\]:如果你遇到了字体库无法加载的问题，你可以将字体库放到本地。以下是一个示例代码:
```javascript
// 引入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来解决。以下是一个示例代码:
```javascript
// 引入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 ]
扫一扫
693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
