当前位置： 移动技术网 > IT编程>开发语言>Java > vue+springboot pdf打印预览

vue+springboot pdf打印预览

2020年04月30日  | 移动技术网IT编程  | 我要评论
pdf打印预览

1.下载pdfjs插件链接：

2.pdfjs插件引入项目中：

①本地运行可将pdfjs放入vue项目的static文件夹下（本项目放在/static/pdf/下）

②如果在linux服务器部署建议将pdfjs单独放一个文件夹，打包可能引起访问路径的文件名发生变化，如果你有更好的方法，everything will be ok!

3.vue搞一搞

 

<el-button size="small" type="primary" @click="pdfprint()">打印预览</el-button>

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();
        }

    }

 

 我踩过的坑希望大家都能跳过去~

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网