@360learning/vue-pdf-viewer 中文文档教程
vue-pdf-viewer
vue-pdf-viewer 是使用 https://mozilla.github.io/pdf.js/ 的 Vue 组件实现 PDF 查看器。
Installation
使用 npm 轻松安装：
npm install @360learning/vue-pdf-viewer
Use
只需导入组件：
import PDFViewer from "@360learning/vue-pdf-viewer";
然后您可以在注册后像使用任何 Vue 组件一样使用它：
<template>
<div class="pdf">
<PDFViewer
:url="url"
>
</PDFViewer>
</div>
</template>
<script>
import PDFViewer from "@360learning/vue-pdf-viewer";
export default {
components: {
PDFViewer
},
data() {
const url = "http://www.africau.edu/images/default/sample.pdf";
return {
url
};
}
};
</script>
Acknowledgement
这个库以优秀的 演示 由 Ross Kaffenberger 完成。
要了解更多信息，请查看描述他的项目如何实施的系列文章。
- Basic page rendering
- Fetching and rendering lazily
- Extracting a data component
- Refactoring to nested abstract components
License
vue-pdf-viewer
vue-pdf-viewer is Vue component using to https://mozilla.github.io/pdf.js/ to implement a PDF viewer.
Installation
Use npm for easy install:
npm install @360learning/vue-pdf-viewer
Use
Simply import the component:
import PDFViewer from "@360learning/vue-pdf-viewer";
and then you can use it like any Vue component once registered:
<template>
<div class="pdf">
<PDFViewer
:url="url"
>
</PDFViewer>
</div>
</template>
<script>
import PDFViewer from "@360learning/vue-pdf-viewer";
export default {
components: {
PDFViewer
},
data() {
const url = "http://www.africau.edu/images/default/sample.pdf";
return {
url
};
}
};
</script>
Acknowledgement
This library takes as it's starting point the excellent demo done by Ross Kaffenberger.
To learn more, checkout the series of posts describing how his project was implemented.
- Basic page rendering
- Fetching and rendering lazily
- Extracting a data component
- Refactoring to nested abstract components
