Vue 读取 PDF文件流

简介

采用vue-pdf用于PDF文件前端显示时,无法读取本地(static路径意外)的PDF。因此,首先Flask 将PDF转成base64 文件流 传入 前端,再由base64转成Blob,并由Vue-pdf 在前端显示/

FLASK后端

def return_img_stream(img_local_path):
  img_stream = ''
  with open(img_local_path, 'rb') as img_f:
    print ('ok')
    img_stream = img_f.read()
    img_stream = base64.b64encode(img_stream)
  return img_stream 

Vue前端

mounted() {
	this.postRequest()
        },
methods: {
	postRequest(){
	this.$axios.post('/api/RequestForm',JSON.stringify(this.$store.state.form),{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
		.then(res=>{
			const blob = this.base64ToBlob(res.data,'application/pdf')
			console.log(blob)
			this.PDFfile= window.URL.createObjectURL(blob)
						console.log('here')
							})
		.catch(function (error) {
			console.log(error);
						})
				},

	base64ToBlob(b64Data, contentType='', sliceSize=512) {
		const byteCharacters = atob(b64Data);
		const byteArrays = [];

		for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
			const slice = byteCharacters.slice(offset, offset + sliceSize);

			const byteNumbers = new Array(slice.length);
			for (let i = 0; i < slice.length; i++) {
					byteNumbers[i] = slice.charCodeAt(i);
					}

					const byteArray = new Uint8Array(byteNumbers);
					byteArrays.push(byteArray);
				}

		const blob = new Blob(byteArrays, {type: contentType});
				return blob;
				}
}
Vue中预览PDF文件,可以使用pdf.js库。下面是一个使用文件的示例: 1. 安装pdf.js库 使用npm安装pdf.js库: ``` npm install pdfjs-dist --save ``` 2. 创建Vue组件 创建一个Vue组件,用于显示PDF文件: ```html <template> <div ref="pdfViewer"></div> </template> <script> import pdfjsLib from 'pdfjs-dist' export default { props: { pdfFile: { type: Blob, required: true } }, mounted() { this.showPdf() }, methods: { async showPdf() { const pdfData = await this.loadPdfData() const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise const canvas = document.createElement('canvas') const canvasContext = canvas.getContext('2d') const viewport = pdf.getPage(1).getViewport({ scale: 1.5 }) canvas.height = viewport.height canvas.width = viewport.width await pdf.getPage(1).render({ canvasContext, viewport }).promise this.$refs.pdfViewer.appendChild(canvas) }, async loadPdfData() { return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsArrayBuffer(this.pdfFile) reader.onload = () => resolve(reader.result) reader.onerror = error => reject(error) }) } } } </script> ``` 在上面的代码中,我们使用了pdf.js库来加载PDF文件并将其渲染到画布上。我们使用FileReader来读取文件,并将其转换为ArrayBuffer,然后将其传递给pdf.js库。 3. 在父组件中使用PDF预览组件 我们可以在父组件中使用我们创建的PDF预览组件: ```html <template> <div> <input type="file" @change="onFileSelected"> <pdf-preview v-if="pdfFile" :pdf-file="pdfFile"></pdf-preview> </div> </template> <script> import PdfPreview from './PdfPreview.vue' export default { components: { PdfPreview }, data() { return { pdfFile: null } }, methods: { onFileSelected(event) { this.pdfFile = event.target.files[0] } } } </script> ``` 在上面的代码中,我们使用文件选择器来选择PDF文件。一旦选择了文件,我们将其传递给PDF预览组件,以便预览PDF文件。 这就是使用Vue预览PDF文件的方式。需要注意的是,pdf.js库支持大多数现代浏览器,但在某些旧浏览器上可能会出现问题。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值