vue文件以pdf的形式展现预览功能实现，与后端接口对接实现预览功能

实现目标：点击预览按钮，浏览器出现新的窗口，展示为附件的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的形式展现的。