VUE中使用vue-office/pdf预览PDF

作者：System 时间：2024年08月17日分类：所有,vue.js 字数：693

这篇文章距离上次修改已过188天，其中的内容可能已经有所变动。

要在Vue中使用vue-office/pdf预览PDF文件，首先需要安装vue-office和pdfjs-dist这两个库。




npm install vue-office pdfjs-dist --save

然后在Vue组件中引入并使用vue-office：




<template>
  <div>
    <vue-office :src="pdfUrl" type="pdf"></vue-office>
  </div>
</template>
 
<script>
import VueOffice from 'vue-office'
import 'vue-office/dist/vue-office.css'
 
export default {
  components: {
    VueOffice
  },
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf'
    }
  }
}
</script>
 
<style>
/* 确保PDF有适当的样式 */
</style>

请确保替换pdfUrl的值为你的PDF文件的正确路径。

注意：vue-office是基于pdfjs-dist构建的，因此它们需要一起使用。vue-office组件会自动处理PDF的加载和渲染。你只需要提供PDF文件的URL或者是一个包含PDF内容的ArrayBuffer。

VUE中使用vue-office/pdf预览PDF

评论已关闭

推荐阅读