Vue プレビュー PDF、vue-pdf の使用、基本チュートリアル

GitHub アドレス: vue-pdf が
最初にサードパーティ ライブラリを導入します。

npm install vue-pdf

次に、必要なファイルをインポートして登録します

import pdf from "vue-pdf"
export default {
    
    
	components: {
    
    
    	pdf
  	},
}

使用：

<template>
  <div class="vue-pdf">
	<pdf src="shanhaijing.pdf"></pdf>
  </div>
</template>

例 (テンプレートを直接使用して 1 行ずつデバッグします):

<template>
  <div class="vue-pdf">
    <el-button type="primary" @click="dialogVisible = true">预览</el-button>
    <el-button type="primary" @click="test">测试</el-button>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :center="true">
      <pdf src="shanhaijing.pdf" :page="pageNum" @num-pages="pageTotalNum = $event"></pdf>
      <span slot="footer" class="dialog-footer">
        <el-button @click="prePage">上一页</el-button>
        <span>{
    
    {
    
     pageNum }} / {
    
    {
    
     pageTotalNum }}</span>
        <el-button @click="nextPage">下一页</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from "vue-pdf"
export default {
    
    
  name: 'TesttwodebugVuePdf',

  data() {
    
    
    return {
    
    
      // 打开dialog
      dialogVisible: false,
      // 显示页数
      pageNum: 1,
      // 总页数
      pageTotalNum: 1,
    };
  },
  mounted() {
    
    },
  components: {
    
    
    pdf
  },
  methods: {
    
    
    // 切换上一页
    prePage() {
    
    
      let p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
    },
    // 切换下一页
    nextPage() {
    
    
      let p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
    },
    // 实在不想自己写的可以使用浏览器自带的打开PDF文档（放链接）
    test(){
    
    
      window.open('XXXXX/XXXX.pdf')
    },
};
</script>

<style lang="scss" scoped>
.el-icon-download {
    
    
  border: 1px solid #ccc;
  cursor: pointer;
}
</style>