Saving a tweet as a PDF is harder than it looks (CORS, tokens, and Unicode)
I wanted a simple thing: paste a Twitter/X post link, get a clean PDF of it. Text, author, images, the whole card. No screenshots stitched together. It sounded like a one-afternoon project. It was not. Here are the four walls I hit, and how I got past each one. If you ever try to read tweet data from the browser, this will save you a day. Wall 1: you cannot read a tweet from the browser The…
Saving a tweet as a PDF proves more challenging than anticipated due to several hurdles. The primary roadblock lies in the inability to directly read a tweet from the browser. Attempts to fetch the tweet via the syndication endpoint used by Twitter's embed widgets result in a "Failed to fetch" error, as the response is restricted by CORS (Cross-Origin Resource Sharing) policy, which only permits requests from Twitter's own origin.
Additionally, the old conversation endpoints have been discontinued, and the official API requires a paid key, eliminating any possibility of obtaining tweet data through a client-side approach. To overcome this obstacle, a server-side proxy is necessary, which fetches the tweet data on behalf of the browser and then returns it.
Another significant challenge involves obtaining the required token parameter, which is essential for accessing the tweet data. This token is not an API key but a value derived from the tweet ID. It is computed client-side by Twitter's embed code, making it impossible to generate programmatically on the server side. To circumvent this issue, a token function is implemented in JavaScript, which calculates the token value precisely.
This token is then passed to the server through a GET request, ensuring smooth communication between the browser and the server.
Once the tweet data is successfully retrieved from the server, another hurdle arises when attempting to incorporate images into the PDF. Rendering cross-origin images using a <canvas> results in a security error, as the images are tainted. To address this, the server fetches the image bytes and returns them as base64-encoded data URLs. This approach ensures compatibility across all browsers, circumventing the same-origin security restriction.
The final obstacle encountered pertains to rendering text accurately, particularly when dealing with non-Latin scripts and emojis. The jsPDF library, although efficient in generating PDFs, struggles with handling complex characters such as Devanagari, Arabic, CJK, or emojis. The text rendered in Latin-1 fonts appears as boxes or broken characters, rendering the output unusable.
To rectify this issue, text is rendered using the browser's canvas, which inherently supports a wide range of fonts and glyphs. The rendered text is then converted into a crisp image and inserted into the PDF, ensuring that all characters are displayed accurately and legibly.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
