Question

我有弹簧启动服务，它提供csv文件作为响应。我们如何从angular 5打字稿中调用此服务。应该发生一个文件的下载取决于一些输入参数，所以我将通过用户点击导出按钮进行发布调用。

下面是控制器中的其余代码。

@Controller
public class MyController {

 @RequestMapping(value = "/downLoadDataQueryCsv", method = RequestMethod.GET)
    public ResponseEntity<Object> downLoadDataQueryCsv(Model model) throws IOException  {
        FileWriter fileWriter = null;
        try {
            DataQueryRequestParams dataQueryRequestParams = new DataQueryRequestParams();
            dataQueryRequestParams.setMbuCategory("UKY");
            // Result table.
            List<OrderIdFinalRank> rankList =  // call api to get data.
            // construct headers
            List<String> csvHeaders = constructDataQueryHeaders();
            StringBuilder fileContent = new StringBuilder(String.join(",", csvHeaders));
            fileContent.append("\n");
            // construct file content from response  
            for(OrderIdFinalRank finalRank : rankList)  {
                fileContent.append(StringUtils.join(constructDataQueryRow(finalRank), ",")).append("\n");
            }
            String fileName = new String("DataQueryTab.csv");
            fileWriter = new FileWriter(fileName);
            fileWriter.write(fileContent.toString());
            fileWriter.flush();

            File file = new File(fileName);

            InputStreamResource resource = new InputStreamResource(new FileInputStream(file));
            HttpHeaders headers = new HttpHeaders();
            headers.add("Content-Disposition", String.format("attachment; filename=\"%s\"", file.getName()));
            headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
            headers.add("Pragma", "no-cache");
            headers.add("Expires", "0");

            ResponseEntity<Object> responseEntity = ResponseEntity.ok().headers(headers).contentLength(file.length())
                    .contentType(MediaType.parseMediaType("application/txt")).body(resource);
            return responseEntity;
        } catch (Exception e) {
            System.out.println("Exception: " +e);
            return new ResponseEntity<>("Error occurred", HttpStatus.INTERNAL_SERVER_ERROR);
        } finally {
            if(null != fileWriter)  {
                fileWriter.close();
            }
        }
    }
    }

现在，当我点击导出按钮时，我需要从UI调用它，下面写的是什么。

我已阅读文件保护程序并添加到代码下方，但它无效。请帮助我。

@Injectable()
export class ApiService { 
onExport(dataQueryRequestParams: any) {
    const dataQueryURL = API_URL + '/downLoadDataQueryCsv';
    const body = JSON.stringify(dataQueryRequestParams);
    this._http.get(dataQueryURL).subscribe(res => {
      saveAs(res, 'data.csv');
    });
  }
    }

注意：当我从浏览器运行其他URL时，会下载该文件，但是当我点击导出按钮时也需要这样做。

是UI技术的新手。感谢

Answer 1

我修复了以下代码的问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-box">
  <div class="slider" id="slider1">
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/animals" alt="">
      <h2 class="slider__item__title">Slide 1 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/arch" alt="">
      <h2 class="slider__item__title">Slide 2 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/nature" alt="">
      <h2 class="slider__item__title">Slide 3 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/people" alt="">
      <h2 class="slider__item__title">Slide 4 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/tech" alt="">
      <h2 class="slider__item__title">Slide 5 Title</h2>
    </div>
  </div>

  <div class="slider" id="slider2">
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/animals" alt="">
      <h2 class="slider__item__title">Slide 1 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/arch" alt="">
      <h2 class="slider__item__title">Slide 2 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/nature" alt="">
      <h2 class="slider__item__title">Slide 3 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/people" alt="">
      <h2 class="slider__item__title">Slide 4 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/tech" alt="">
      <h2 class="slider__item__title">Slide 5 Title</h2>
    </div>
  </div>
</div>

<div class="slider-nav">
  <div class="slider-nav__prev" id="prev"><i class="fa fa-angle-left"></i></div>
  <div class="slider-nav__next" id="next"><i class="fa fa-angle-right"></i></div>
  <div class="slider-nav__dots" id="dots"></div>
</div>

在调用者Component类中添加如下。

export class ApiService {
 onExport(requestParams: any): Observable<any> {
    const dataQueryURL = API_URL + '/downLoadDataQueryCsv';
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'Application/json; charset=UTF-8'
      }),
      responseType: 'text' as 'text'
    };
    const body = JSON.stringify(requestParams);
    return this._http.post(dataQueryURL, body, httpOptions);
  }
}

谢谢大家的回复！

从角度为5

1 个答案: