1.PDF.JS
下载地址:地址
1.下载资源放在public/static/pdf下
2.后端书写方法,返回byte字节流给前端。
3.前端API注意返回类型为blob
export function filePreview(query){
return request({
url:"/attachment-server/attachment/filePreview",
method: 'post',
responseType: 'blob',
params:query,
timeout:60000
})
}
4.前端封装方法
previewPdf(row){
filePreview({
path:"/asset/deviceTransfer/file",fileName:row.oaFile}).then((res)=>{
let blob = new Blob([res.data],{
type:"application/octet-stream"});
var url = window.URL.createObjectURL(blob)
window.open(`/static/pdf/web/viewer.html?file=${
encodeURIComponent(url)}`);
})
},
5.调用即可。
2.v-viewer
可用在el-upload回显上,原组件没有大图预览。
中文文档地址:文档
1.安装
npm install v-viewer
2.引入
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)
3.使用
在包含图片标签的父级,添加属性v-viewer="{inline: false}"