逆向工程将个人资料页面下载为 HTML

Question

这是一个多部分的过程。 页面上有一个按钮，可让我将页面下载为 pdf，我正尝试将其构建到 Chrome 扩展程序中：

1.) 按钮被点击

2.) api被命中，检查页面是否可以下载，看起来像这样

{"error":false,"printError":false,"msg":"Not Ready","ready":false,"id":1108908001,"link":"streamPdf/1108908001"}
{"error":false,"printError":false,"msg":"Ready","ready":true,"id":1108908001,"link":"streamPdf/110890800"}

3.) 一旦它读为就绪，就会发出下一个请求

fetch("https://www.website.com/cap/people/streamPdf/1108908001"});

这将返回页面的 HTML 值

4.) 将 HTML 值转换为 base64

5.) 然后浏览器获取 pdf

fetch("data:application/pdf;base64,"+base64);

6.) PDF 下载

但是，当我复制 Step #5 的 fetch 并将其粘贴到浏览器中时，它不会触发下载。

我原以为会触发一个文件。 是否有什么我缺少触发创建 PDF 的东西？

我到目前为止的代码：

var canID = "someNUM"
fetch("https://www.website.com/cap/people/printStateAjax?id="+canID)
.then(resp=>resp.json())
.then(data=>{
    if(data.msg == "Ready") {
        console.log('ready')
        fetch("https://www.website.com/cap/people/streamPdf/"+canID)
        .then(resp => {return resp.text()})
        .then(data => {
            var base64 = btoa(unescape(encodeURIComponent(data)))
            console.log('1')
            return base64
        })
        .then(base64 => {
            fetch("data:application/pdf;base64,"+base64)
            .then(resp => {return resp.blob()})
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                // the filename you want
                a.download = 'test_pdf';
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url)
            })
        })
    }
})

这将下载 PDF，但 PDF 为空。 我究竟做错了什么？

Answer 1

我想知道更简单的东西是否可行 - 像这样......

var canID = "someNUM"
fetch("https://www.website.com/cap/people/printStateAjax?id="+canID)
  .then(resp=>resp.json())
  .then(data=>{
    if(data.msg == "Ready") {
      console.log('ready')
      fetch("https://www.website.com/cap/people/streamPdf/"+canID,
            {
              headers: {
                "Content-Type":"application/pdf"
              }
            }
           )
        .then(resp => resp.blob())
        .then(blob => {
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          // the filename you want
          a.download = 'test_pdf.pdf';
          a.click();
          window.URL.revokeObjectURL(url)
        })
    }
  });

这只是抓取 blob 并将其交给链接。

此外，我想你实际上并不需要添加a到DOM标签，使其工作。

我没有在浏览器中尝试过这个，所以可能会有一些小的语法错误，但从概念上讲我认为它很接近。