1.下载pdfjs插件链接：
2.pdfjs插件引入项目中：
①本地运行可将pdfjs放入vue项目的static文件夹下(本项目放在/static/pdf/下)
②如果在linux服务器部署建议将pdfjs单独放一个文件夹，打包可能引起访问路径的文件名发生变化，如果你有更好的方法，everything will be ok!
3.vue搞一搞
打印预览
pdfprint() {
this.$http({
//首先需要生成pdf文件
url: `/project/outpdf/exportpdf`,
method: 'post',
data: this.dataform
}).then(({data}) => {
if (data && data.code === 0) {
let url = ''
//根据本地和linux服务器pdf存放的位置进行配置
if (this.$http.base_url === 'http://127.0.0.1') {
url = '/static/pdf/web/viewer.html?file='
} else {
url = '/pdf/web/viewer.html?file='
}
let pdfurl = encodeuricomponent(this.$http.base_url + `/project/outpdf/pdffilestream?token=${this.$cookie.get('token')}&filename=${filename}`)
window.open(url + pdfurl)
}
})
}
4.后台返回文件流来一波
/**
*返回文件流
**/
@requestmapping("/pdffilestream")
public void pdfstreamhandeler(string filename,httpservletrequest request, httpservletresponse response) {
try {
string pdfpath = filepath + filename;
file file = new file(pdfpath);
byte [] data = null;
fileinputstream inputstream = null;
inputstream = new fileinputstream(file);
data=new byte[inputstream.available()];
inputstream.read(data);
response.getoutputstream().write(data);
inputstream.close();
response.setheader("access-control-allow-origin", "*");
} catch (exception e) {
e.printstacktrace();
}
}
我踩过的坑希望大家都能跳过去~
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！