I can't retrieve an uploaded buffer of a pdf file

I’m creating a pdf through jsPDF and using the doc.output() funtion to return it as base64. I then decode it to a buffer:

const ipfsClient = require("ipfs-http-client")

let pdf
    let currentDate
    if(language === "de") {
      currentDate = new Date()
      pdf = deCreatePDF(personalData, allergyData, medicationData)
    } else {
      currentDate = new Date()
      pdf = enCreatePDF(personalData, allergyData, medicationData)
    }
const buffer = Buffer.from(pdf, "base64");

After that I add the buffer to my local node like this:

const client = ipfsClient();

const addResponse = await client.add(buffer);

This is the format of my buffer.

<Buffer 3c 31 7e d7 7d f4 a1 b8 ff 4f 2a 5e fc f6 a0 7b f3 da ad e9 ed d7 44 7f 45 eb 28 ba b7 1e b3 6d 11 fc c7 9d 89 a0 68 c7 4d 39 f7 9d bb f7 df 7d f7 df ... 3451 more bytes>

But if I then try to see the pdf with https://ipfs.io/ipfs I don’t get a response.
Example: https://ipfs.io/ipfs/QmWCvJSZHYi877tg8nCSEze5zfmMZmJpzaMomk4rqJ5KKw
I also tried to open the file with ipfs Desktop but the file can’t be previewed, only downloaded, but the downloaded file can’t be opened.
Capture
I would like to achieve that the pdf can be viewed through the default pdf viewer when clicking on the /ipfs link.