Vue에서 PDF파일 보기, 다운로드, 프린트 기능 지원하기
Install vue-pdf-app
npm i vue-pdf-app
Pdf.vue
// Pdf.vue
<template>
<VuePdfApp pdf="./../resume_kangjiyeon.pdf" page-scale="100" @open="openHandler"></VuePdfApp>
</template>
<script>
import VuePdfApp from "vue-pdf-app";
export default {
components: {
VuePdfApp,
},
methods: {
openHandler(pdfApp) {
window._pdfApp = pdfApp;
},
},
};
</script>
<style scoped>
@import "https://unpkg.com/vue-pdf-app@2.0.0/dist/icons/main.css";
</style>
https://www.npmjs.com/package/vue-pdf-app
vue-pdf-app
Vue 2 pdf viewer. Latest version: 2.1.0, last published: 10 months ago. Start using vue-pdf-app in your project by running `npm i vue-pdf-app`. There are 2 other projects in the npm registry using vue-pdf-app.
www.npmjs.com
https://codesandbox.io/s/mqyzy8158x?file=/src/App.vue
Vue PDF Download - CodeSandbox
Vue PDF Download by sakapun using html2canvas, pdfmake, vue
codesandbox.io
https://codesandbox.io/s/vue-pdf-app-external-pdfj-interaction-g5jeb?file=/src/App.vue
vue-pdf-app-external-pdfj-interaction - CodeSandbox
[Vue warn]: Invalid prop: type check failed for prop "field"
codesandbox.io
https://github.com/sandanat/vue-pdf-app
반응형
'UXUI Development > Vue.js' 카테고리의 다른 글
| nuxt3 / color-mode (0) | 2023.05.22 |
|---|---|
| Scroll 라이브러리 (0) | 2022.06.28 |
| [Vue] 서버사이드 렌더링이란? (0) | 2022.05.17 |
| [Vue] Nuxt.js (0) | 2022.05.17 |
| [Vue] styled-component (0) | 2022.04.19 |
| [Vue] Router - Vue에서 외부링크 주소 연결하기 (Router External URL Redirect) (0) | 2022.04.11 |
| [Vue] Vue-cli 프로젝트 생성 (0) | 2022.02.07 |
| [Vue] vue.js slider librarys (0) | 2022.01.14 |