vue 将base64 转化为pdf 显示在界面
时间: 2023-06-27 13:06:00 浏览: 58
你可以使用以下步骤将 base64 转化为 pdf 并在 Vue 界面中显示:
1. 将 base64 解码为二进制文件
```javascript
function base64toBlob(base64Data, contentType) {
contentType = contentType || '';
var sliceSize = 1024;
var byteCharacters = atob(base64Data);
var bytesLength = byteCharacters.length;
var slicesCount = Math.ceil(bytesLength / sliceSize);
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, { type: contentType });
}
```
2. 使用 pdf.js 读取二进制文件并转化为 canvas
```javascript
function renderPdf(blob, canvas) {
var url = URL.createObjectURL(blob);
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({ scale: scale });
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
```
3. 在 Vue 组件中使用
```vue
<template>
<div>
<canvas ref="canvas"></canvas>
</div>
</template>
<script>
import pdfjsLib from 'pdfjs-dist';
export default {
mounted() {
var canvas = this.$refs.canvas;
var base64Data = 'your-base64-data';
var blob = base64toBlob(base64Data, 'application/pdf');
renderPdf(blob, canvas);
}
}
</script>
```
请注意,使用 pdf.js 需要在 Vue 项目中安装 `pdfjs-dist` 包。