Vue 移动端使⽤PDF.js 实现预览功能
使⽤插件:
使⽤时需要注意到的事项
1. 引⼊
填坑1：import 进不来，会报错，改⽤require
填坑2：未设置GlobalWorkerOptions.workerSrc时会报错，请求worker.js 404
const PDF = require('pdfjs-dist');
PDF.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/');
2. 调⽤，打开pdf⽂件
填坑1：新版本新增promi这⼀层
填坑2：getDocument获取的本地⽂件，没有获取到，故放到了static/public这个不打包⽬录下
3. 渲染
填坑1：新版本getViewport⽅法的参数为⼀个对象
接收到的pdf对象，调⽤getPage⽅法，参数为pageNumber, .then((page) => { /* ...code */})之后调⽤der({
canvasContext: Context('2d'),nior
viewport: Viewport({scale:1.5})
})所以为了减⼩该插件的体积和相关报错问题, 我将pdf.js的静态⽂件放在了public⽂件夹中, 并引⼊到了index.html中
谢谢 英文
代码如下:
<template>
<div class="absolute flex flex-col justify-between w-full h-full bg-bgMain">
<div>
<div class="flex items-center justify-center h-12 text-lgPlus">
环球教育在线<van-icon
name="arrow-left"
class="absolute text-xl cursor-pointer left-4"
@click="() => {
@click="() => {
<(-1)
列举英文
}"
/>查看xx
</div>
<div class="mx-2 shadow-md">
<canvas class="hidden" id="the-canvas"></canvas>
<img class="w-full" :src="srcRef" />
voice
</div>
</div>
<div class="flex justify-between p-4 bg-white">
<van-button class="flex-grow" type="primary" @click="handleDownload">下载电⼦xx</van-button> </div>
</div>
</template>
<script tup>
import { uRoute, uRouter } from 'vue-router'
import { ref, onMounted, reactive, watch, computed, onUnmounted } from 'vue'
const router = uRouter();
const route = uRoute();
const srcRef = ref()
// 引⼊核⼼⽂件
pdfjsLib.GlobalWorkerOptions.workerSrc =
'./build/pdf.worker.min.js';
let url = route.query.downloadUrl
onMounted(() => {
document.title = "发票服务-查看发票"
})
onMounted(async () => {
// 加载 pdf 资源
const loadingTask = Document({
url: url, // pdf路径
cMapUrl: './build/cmaps/', // 指定pdf的map⽂件路径
cMapPacked: true
gbpusd});
// pdf加载完成的回调
const pdf = await loadingTask.promi;
// 默认加载第⼀页的数据
const page = Page(1);
// 放⼤1.5倍
const scale = 1.5;
const viewport = Viewport({ scale });
const outputScale = window.devicePixelRatio || 1;
const canvas = ElementById("the-canvas");
const context = Context("2d");
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
visit的过去分词canvas.style.height = Math.floor(viewport.height) + "px";
const transform = outputScale !== 1
[outputScale, 0, 0, outputScale, 0, 0]
: null;
// 创建了⼀个canvas画板⽤来存放
const renderContext = {
canvasContext: context,
transform,
viewport,
};
der(renderContext).promi;
// 将画布转化成图⽚后渲染
srcRef.value = DataURL("image/jpeg")
})
function handleDownload() {
window.location.href = url
window.location.href = url
}
// let url = "-/invoice%2F500102010010020%2F011000010026%2F011000010026_89020403.pdf" </script>
以上属于单张pdf, 若是含有分页的pdf, 则以下代码仅供参考
(function() {
let el = ElementById('canvasWrap');
if (!el) {
el = ateElement('div')
el.id = 'canvasWrap'
document.body.appendChild(el)
}
el.innerHTML = ''
let winW = document.documentElement.clientWidth
// 加载 pdf 资源
let loadingTask = Document('xx.pdf')
/
/ PDF 加载完成的回调。
loadingTask.promi.then(function(pdf) {
console.log('pdf', pdf)
// 可以获取到总页数。
let pageNum = pdf.numPages
var _pageNum = 1;奥巴马就职演说
var renderPageToCanvas = function(pageNum, auto=fal) {
// 获取其中的⼀个页⾯
// you can now u *page* here
_pageNum = pageNum
/
/ 获取原始⼤⼩的数据
var viewport = Viewport({
scale: 1,
});
var scale = (500 / viewport.width).toFixed(2)
viewport = Viewport({
scale: scale
});
var canvas = ateElement('canvas');
el.appendChild(canvas)
var context = Context('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// 创建了⼀个canvas画板⽤来存放
var renderContext = {
canvasContext: context,
viewport: viewport
};
if (auto)
renderPageToCanvas(pageNum + 1, auto);
});
bugfree
}
renderPageToCanvas(_pageNum, true);
renderPageToCanvas(Math.max(_pageNum - 1, 1));
}
日语可恶renderPageToCanvas(Math.min(_pageNum + 1, pdf.numPages)); }
}, function(reason) {
<(reason)
})
}
)
()
