vue导出pdf(接口)

简介: vue导出pdf(接口)

get请求

export function getPdf(id) {
   
  const InfoRequestDTO = {
   
        consumer: store.getters.QLMConfig.application_id,
        language: store.getters.language,
        serialNo: uuid.v1(),
        tag: id
      };
  return request({
   
    url: store.getters.QLMConfig.qlm_gateway_url + "/specialwork/ZxjlGxcx/getPdf",
    method: 'get',
    params:InfoRequestDTO,
    headers: {
   
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    responseType: 'arraybuffer'
  })
}

调用:

daochu(id) {
   
      this.loading = true;
      getPdf(id).then(
        data => {
   
          this.loading = false;
          let blob = new Blob([data], {
    type: 'application/vnd.ms-pdf' })
          let objectUrl = window.URL.createObjectURL(blob) // 创建URL
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = objectUrl
          link.download = '突出贡献与创新申报表.pdf' // 自定义文件名
          document.body.appendChild(link)
          link.click() // 下载文件
          window.URL.revokeObjectURL(objectUrl) // 释放内存

          // const url = window.URL.createObjectURL(new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }))
          // const link = document.createElement('a')
          // link.style.display = 'none'
          // link.href = url;
          // link.setAttribute('download', '突出贡献与创新申报表.pdf')
          // document.body.appendChild(link)
          // link.click()
          // document.body.removeChild(link)
        }
      )
    },
后端:
Controller
   /**
     * 导出申报表
     *
     * @param response
     * @return
     */
    @ApiOperation(value = "导出申报表", notes = "导出申报表")
    @GetMapping(value = "/getPdf")
    public void getPdf(HttpServletRequest request, HttpServletResponse response) {
   
//        Map<String, Object> root = new HashMap<String, Object>(); // 创建数据模型
        try {
   
            String fileName = System.currentTimeMillis() + (int) (Math.random() * 90000 + 10000) + "";
            printFile("ndbg.ftl", root, fileName + ".doc", "C://specialworktempfile/", "C://specialworktempfile/");
            new PdfConverter().doc2pdf("C://" + fileName + ".doc", "C://" + fileName + ".pdf");
            //pdf
            String pdffilePath = "C://" + fileName + ".pdf";
            File pdffile = new File(pdffilePath);
            //doc
            String docfilePath = "C://" + fileName + ".doc";
            File docfile = new File(docfilePath);

            if (pdffile.exists()) {
   
                FileDownload.fileDownload(response, "C://" + fileName + ".pdf", "申报表" + ".pdf");
                pdffile.delete();
            } else {
   

            }
            if (docfile.exists()) {
   
                docfile.delete();

            } else {
   

            }
        } catch (Exception e) {
   
            e.printStackTrace();
        }
}

工具类中核心代码

/**
     * @param response
     * @param filePath //文件完整路径(包括文件名和扩展名)
     * @param fileName //下载后看到的文件名
     * @return 文件名
     */
    public static void fileDownload(final HttpServletResponse response, String filePath, String fileName) throws Exception {
   
        if (fileName == null) {
   
            fileName = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.length());
        }

        File file = new File(filePath);
        if (file.exists()) {
   
            byte[] data = FileUtil.toByteArray2(filePath);
            fileName = URLEncoder.encode(fileName, "UTF-8");
            //fileName = new String(fileName.getBytes(), "GBK");
            response.reset();
            response.addHeader("Access-Control-Allow-Origin", "*");
            response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
            response.addHeader("Access-Control-Allow-Headers", "Content-Type");

            response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
            response.addHeader("Content-Length", "" + data.length);
            //response.setContentType("Content-Type:application/force-download");
            response.setContentType("application/octet-stream;charset=UTF-8");
            OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
            outputStream.write(data);
            outputStream.flush();
            outputStream.close();
            response.flushBuffer();
        } else {
   
            throw new RuntimeException("未找到文件");
        }
    }
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
|
4月前
|
人工智能 缓存 Linux
Confluence PDF导出中文支持
Confluence PDF导出中文支持
|
20天前
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
27天前
|
JavaScript 前端开发
vue导出pdf(大数量可能有问题)
vue导出pdf(大数量可能有问题)
|
1月前
|
开发框架 前端开发 JavaScript
在Winform分页控件中集成导出PDF文档的功能
在Winform分页控件中集成导出PDF文档的功能
|
1月前
|
XML Java BI
怎么通过itextpdf架包实现报表导出为pdf文件?
Java通过itextpdf架包实现报表导出为pdf文件
|
2月前
|
JavaScript
Vue PDF预览(微信公众号,app也可用)
Vue PDF预览(微信公众号,app也可用)
98 0
|
3月前
|
前端开发 JavaScript API
技术笔记:vue+pdfh5实现将pdf渲染到页面上
技术笔记:vue+pdfh5实现将pdf渲染到页面上
|
4月前
|
数据采集 移动开发 前端开发
springboot使用html模版导出pdf文档
springboot使用html模版导出pdf文档
|
4月前
|
JSON JavaScript 前端开发
vue项目使用Print.js插件实现PDF文件打印
vue项目使用Print.js插件实现PDF文件打印
401 0

热门文章

最新文章