实现目标:点击预览按钮,浏览器出现新的窗口,展示为附件的pdf的格式呈现,此功能与后端进行接口对接。
实现效果:
实现方法:(与后端对接口实现,后端将word格式转化为pdf格式)
1.后端的swagger中
2.api的js文件中
export function previewFileById(param) {
return request({
url: '/xxxx/xxxx/preview',
method: 'post',
responseType: 'blob', // 必须要写
data: param,
});
}
3.vue文件中
首先安装并引入
cnpm install --save vue-pdf-signature
import pdf from 'vue-pdf-signature'
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory'
components: { pdf, CMapReaderFactory },
引入api文件下的预览接口
import {previewFileById } from '@/api/xxxx/index'
template中:
<template slot-scope="scope">
<el-button @click="previewPlan(scope.row)" type="text" size="small" style="margin-right: 20px" ref="pdf" :src="pdfSrc" class="pdf">
<i class="el-icon-folder"></i>
预览
</el-button>
</template>
methods中:
previewPlan(row) {
let fileIdData = new FormData()
fileIdData.append('id', row.id)
// 预览接口调用
previewFileById(fileIdData).then((res) => {
const blob = new Blob([res.data], { type: 'application/pdf' })
this.pdfSrc = window.URL.createObjectURL(blob)
window.open(this.pdfSrc) //新窗口打开,借用浏览器去打印
})
},
这样,与后端对接接口的预览功能就实现了,是以新窗口pdf的形式展现的。