vue3移动端嵌入pdf的两种办法

1.使用embed嵌入
好处：简单，代码量少，功能齐全
缺点：有固定样式，难以修改，不可定制

<embed class="embedPdf" 
:src="pdfurl" 
type="application/pdf">
1
2
3

2.使用vue-pdf-embed（pdf预览）的形式定制嵌入pdf
优点：除了pdf的内容别的都可以修改，可以定制样式
缺点：要自己手写下载，下一页，上一页等功能
使用vue-pdf-embed插件展示预览pdf（这里只能展示一页，或者不分页全部展示，就会是一长条，所以我们自己做分页。

<div class="vuePdfEmbed">
        <VuePdfEmbed
          :source="state.source"
          :style="scaleFun"
          class="vue-pdf-embed"
          :page="state.pageNum"
          width="700"
        />
        <div class="page-tool">
          <div class="page-tool-item" @click="lastPage">上一页</div>
          <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
          <div class="page-tool-item" @click="nextPage">下一页</div>
          <div class="page-tool-item" @click="downloadPDF">下载</div>
        </div>
    </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

分页的逻辑是使用vue3-pdfjs中的createLoadingTask函数获取pdf的总页数，这个函数是一个异步函数，之后会返回pdf的信息（别的信息基本没用，只有numPages比较有用。）

import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // 获得总页数

const pdfurl = ref("......pdf地址")
const state = reactive({
  source: pdfurl, //预览pdf文件地址
  pageNum: 1, //当前页面
  scale: 1, // 缩放比例
  numPages: 0, // 总页数
});
const scaleFun = reactive({
  transform:'scale('+state.scale+')'
})

// 获取上一页
function lastPage(){
  if(state.pageNum>1){
    state.pageNum--
  }
}

// 获取下一页
function nextPage(){
  if(state.pageNum<state.numPages){
    state.pageNum++
  }
}

// 下载pdf
function downloadPDF(){
	fetch(encodeURI(pdfurl.value)).then(res => {
        res.blob().then(myBlob => {
          const href = URL.createObjectURL(myBlob);
          const a = document.createElement('a');
          a.href = href;
          a.download = 'report'; // 下载文件重命名
          a.click();
          a.remove();
        });
      });
}

onMounted(() => {
  // 加载异步任务
  const loadingTask = createLoadingTask(state.source);
  // 载入pdf后获取页数
  loadingTask.promise.then((pdf) => {
    state.numPages = pdf.numPages;
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

分页的逻辑是使用vue3-pdfjs中的createLoadingTask函数获取pdf的总页数，这个函数是一个异步函数，之后会返回pdf的信息（别的信息基本没用，只有numPages比较有用。）

import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // 获得总页数

const pdfurl = ref("......pdf地址")
const state = reactive({
  source: pdfurl, //预览pdf文件地址
  pageNum: 1, //当前页面
  scale: 1, // 缩放比例
  numPages: 0, // 总页数
});
const scaleFun = reactive({
  transform:'scale('+state.scale+')'
})

// 获取上一页
function lastPage(){
  if(state.pageNum>1){
    state.pageNum--
  }
}

// 获取下一页
function nextPage(){
  if(state.pageNum<state.numPages){
    state.pageNum++
  }
}

// 下载pdf
function downloadPDF(){
	fetch(encodeURI(pdfurl.value)).then(res => {
        res.blob().then(myBlob => {
          const href = URL.createObjectURL(myBlob);
          const a = document.createElement('a');
          a.href = href;
          a.download = 'report'; // 下载文件重命名
          a.click();
          a.remove();
        });
      });
}

onMounted(() => {
  // 加载异步任务
  const loadingTask = createLoadingTask(state.source);
  // 载入pdf后获取页数
  loadingTask.promise.then((pdf) => {
    state.numPages = pdf.numPages;
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

.vuePdfEmbed{
  flex: 1;
  display: flex;
  height: 100%;
  flex-direction: column;
}
.vuePdfEmbed{
  .page-tool {
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    background: rgb(66, 66, 66);
    color: white;
    border-radius: 19px;
    z-index: 100;
    cursor: pointer;
    width: 320px;
    align-items: center;
    margin: auto;
    justify-content: space-around;
  }
  .page-tool-item {
    padding: 8px 15px;
    padding-left: 10px;
    cursor: pointer;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29