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("未找到文件");
        }
    }
目录
相关文章
|
5月前
|
开发框架 前端开发 JavaScript
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
|
1月前
|
前端开发 API
前端界面生成PDF并导出下载
【10月更文挑战第21天】利用合适的第三方库,你可以在前端轻松实现界面生成 PDF 并导出下载的功能,为用户提供更方便的文档分享和保存方式。你还可以根据具体的需求进一步优化和定制生成的 PDF 文件,以满足不同的业务场景要求。
|
2月前
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
585 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
|
2月前
|
资源调度 前端开发 JavaScript
安利一款基于canvas/svg的富文本编辑器-支持在线导出PDF、DOCX
高性能:利用Canvas和SVG进行图形和矢量图形的渲染,提供高性能的绘图能力。 可扩展性:Canvas-Editor是一个开源项目,支持通过插件机制扩展编辑器的功能,如DOCX、PDF导出、表格分页等。 丰富的文本编辑功能:支持多种文本编辑操作,如插入表格、分页、性能优化等。
278 0
|
2月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
218 0
|
4月前
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
3688 0
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
4月前
|
JavaScript 前端开发
vue导出pdf(大数量可能有问题)
vue导出pdf(大数量可能有问题)
201 2
|
4月前
|
开发框架 前端开发 JavaScript
在Winform分页控件中集成导出PDF文档的功能
在Winform分页控件中集成导出PDF文档的功能
|
4月前
|
XML Java BI
怎么通过itextpdf架包实现报表导出为pdf文件?
Java通过itextpdf架包实现报表导出为pdf文件
|
1天前
|
人工智能 文字识别 数据挖掘
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式
MarkItDown 是微软开源的多功能文档转换工具,支持将 PDF、PPT、Word、Excel、图像、音频等多种格式的文件转换为 Markdown 格式,具备 OCR 文字识别、语音转文字和元数据提取等功能。
40 8
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式