Ett dokument med inbäddat typsnitt, en tabell med regler för sidbrytning, en behörighetskontroll på servern för varje hämtning och ett beslut om filen sparas när den utfärdas eller skapas på nytt. Beställningen och proven här är redaktionella förslag; ingen app har provkörts av redaktionen.
Skilj PDF:en du får i chatten från PDF:en appen ska skapa
Du har byggt en app för påhittade kanotbokningar. Varje bokning ska ge ett kvitto som kunden kan ladda ned, och en kursdeltagare ska kunna hämta ett intyg. Det är appen som ska skapa dokumenten, varje gång en användare ber om dem, långt efter att du slutat bygga.
Blanda inte ihop det med en fil som byggverktyget tar fram åt dig. Lovables changelog beskriver i en post från 2 april 2026 att Lovable kan ta fram filer som PDF i chatten, och att sådana filer stannar i konversationen och aldrig ändrar projektets källkod. En snygg PDF i chatten är alltså inget belägg för att appen kan göra samma sak åt sina användare. Lovables dokumentation om Storage beskrev vid kontrollen 27 oktober 2026 inte hur genererade filer skapas eller sparas. Du beställer därför PDF:en som en funktion bland andra och skriver in kraven själv.
Fyra frågor brukar lämnas obesvarade när beställningen bara säger ”lägg till en knapp för PDF”: vilket typsnitt som används, vad som händer när en tabell inte får plats på en sida, vem som får hämta filen och om kvittot ska se likadant ut om priset ändras nästa vecka. De fyra proven nedan besvarar en fråga var.
Beställningen
Byt hakparenteserna mot dina egna begrepp. Beställningen säger inget om vilka uppgifter eller kolumner som ska med utöver kvittots egna fält; det beslutet beskriver artikeln om CSV-export i appen, och samma urvalsfråga gäller för en PDF.
Lägg till en knapp ”Hämta kvitto (PDF)” på varje [bokning]. Kvittot ska visa kvittonummer, datum, kundens namn och en tabell med rader, antal, styckpris och summa. Bädda in ett typsnitt som innehåller å, ä och ö, och låt texten gå att markera och kopiera. När tabellen inte får plats på en sida ska rubrikraden upprepas på nästa sida, ingen rad delas mellan två sidor och summan inte stå ensam överst på en sida. Varje sida ska ha sidnummer i formen ”Sida 1 av 2”.
Skapa kvittot en gång, när bokningen betalas, och spara den färdiga filen i privat lagring. Senare hämtningar ska lämna ut samma fil, även om priset, namnet eller raderna i underlaget ändras. Bara kontot som äger bokningen får hämta kvittot, och kontrollen ska ske på servern vid varje hämtning, även via en direktlänk eller en ändrad adress. Redovisa var filerna sparas, hur länge en nedladdningslänk gäller och hur behörigheten kontrolleras. Ändra inget annat i appen. Beskriv först vad du tänker ändra.
Förbered två testkonton, A och B, med påhittade uppgifter. A har bokning KV-1001 och B bokning KV-1002. Ge A:s bokning 45 rader, till exempel en rad per paddeldag. Välj teckenstorlek och radavstånd så att tabellen behöver två sidor; lägg till rader om 45 ändå ryms på en sida, och skriv in en rad med texten ”Kanot för två, Ängsö–Öregrund, inkl. väst och åra”.
Prov 1: å, ä och ö syns och går att kopiera
Ett PDF-dokument visar bara de tecken som finns i typsnittet det använder. Dokumentationen för jsPDF, ett vanligt bibliotek för att skapa PDF i webbläsaren, anger att PDF-formatets 14 standardtypsnitt där är begränsade till ASCII och att du måste lägga till ett eget typsnitt med de tecken som behövs för annat. Andra verktyg gör på andra sätt, så provet säger mer än namnet på biblioteket.
Hämta A:s kvitto och leta upp raden om Ängsö och Öregrund. Facit: Ä, Ö, å, ä och ö syns som de ska, utan tomma rutor, frågetecken eller borttagna bokstäver. Markera sedan raden, kopiera den och klistra in i ett anteckningsprogram. Facit: samma text kommer med. Går inget att markera kan sidan ha blivit en bild utan textlager. Då fungerar inte vanlig textsökning, och uppläsning kan kräva OCR. Att text går att kopiera visar däremot inte att läsordningen fungerar i en skärmläsare. Öppna också filen i en annan PDF-läsare eller på en annan dator än den du byggde på. Ett typsnitt som inte bäddats in kan bytas ut mot ett annat där.
Blir tecknen fel redan i appens vanliga vy är felet inte PDF:ens. Börja då med formatproven i Svenska i appen.
Prov 2: tabellen bryts snyggt över två sidor
Skapas PDF:en ur en webbsida styrs sidbrytningen av CSS. CSS 2.1 säger att utskriftsprogram får upprepa en tabells rubrikrader på varje sida tabellen sträcker sig över. Det står ”får”, inte ”måste”. Egenskapen break-inside med värdet avoid betyder enligt W3C:s modul för fragmentering att en brytning inuti rutan ska undvikas, och det är ett önskemål snarare än ett löfte. Därför är facit själva filen, inte modellens försäkran.
Hämta A:s kvitto med de 45 raderna, eller det större antal du behövde för att fylla två sidor. Facit:
- Tabellen fortsätter på sida 2, och rubrikraden med Rad, Antal, Styckpris och Summa står överst på båda sidorna.
- Ingen rad är delad, så att halva texten står längst ned på sida 1 och resten överst på sida 2.
- Summan står på samma sida som minst en tabellrad, inte ensam.
- Sidnumren lyder ”Sida 1 av 2” och ”Sida 2 av 2”.
- Antalet rader är samma som i testunderlaget. Räkna dem, eftersom en rad som hamnat utanför sidans kant ser ut som ingenting.
Prova också B:s kvitto med en enda rad. Ett kvitto som får en tom andra sida eller en rubrikrad utan rader har fått sina regler för sidbrytning fel åt andra hållet.
Prov 3: B kan inte hämta A:s PDF
Ett kvitto innehåller namn, belopp och ibland adress. Att B inte ser A:s bokning i listan säger inget om själva filen. Proven görs med samma metod som i guiden Behörigheter i Lovable: två konton i var sin privat webbläsarsession och ett facit som skrivs ned före provet.
Lovables dokumentation om Storage anger att privat lagring är standard, att filer i en privat bucket bara går att nå för användare med rätt behörighet och att filer i en publik bucket kan nås av alla som har adressen. Filer i privata buckets laddas ned via tillfälliga signerade länkar, och den länk som Copy URL ger för en privat bucket går ut efter en timme. Appens egna nedladdningslänkar kan ha en annan giltighetstid; därför ingår redovisningen av den i beställningen. En signerad länk kan samtidigt fungera som en tillfällig nyckel: Supabases dokumentation beskriver nedladdning utan ytterligare behörighet med en sådan länk. Privat lagring betyder därför inte i sig att varje hämtning kontrollerar vem som är inloggad. Beställningen här kräver det senare; be verktyget låta appens server kontrollera ägaren och lämna ut filen utan att exponera en delbar fillänk.
- Direktlänken till kvittot. Öppna A:s kvittosida, kopiera adressen och öppna den som B. Facit: nekat eller ”hittas inte”, utan att A:s namn eller belopp syns.
- Ändrad adress. Byt KV-1002 mot KV-1001 i adressen till B:s eget kvitto. Facit: nekat.
- Utloggad. Öppna adressen till A:s kvittosida i ett fönster där ingen är inloggad. Facit: inloggning krävs.
- Själva filens länk. Kopiera den verkliga nedladdningsadressen till A:s PDF och öppna den direkt som B och i ett nytt utloggat fönster, innan någon giltighetstid har löpt ut. Facit för beställningen här: båda nekas, även om de har adressen. Kontrollera också att B inte kan få en ny länk genom att byta bokningsnummer i anropet. Om en signerad länk lämnas ut, pröva den även efter den redovisade giltighetstiden; då ska den inte längre ge filen. Att länken slutar fungera senare ersätter inte provet före utgångstiden. En redan nedladdad kopia ligger kvar hos mottagaren.
Ligger kvitton i en publik bucket underkänns provet direkt, oavsett hur länkarna ser ut. Fler prov för just fillänkar, bland annat med två testfiler, finns i guiden Filuppladdning i Lovable.
Prov 4: ett sparat kvitto ändras inte i efterhand
Här finns två sätt att bygga funktionen, och båda kan se rätt ut i första provet. Antingen sparas den färdiga filen när kvittot utfärdas, eller så skapas en ny PDF ur databasen varje gång någon klickar. Om den nya PDF:en skapas ur aktuella värden utan ett sparat historiskt underlag visar den dagens värden. Höjer du priset på kanothyran i oktober visar ett kvitto från juli då oktoberpriset, utan att någon har rört kvittot.
För kvitton och intyg vill du oftast ha det första sättet, eftersom dokumentet ska visa läget när det utfärdades. En sammanställning, till exempel ”alla bokningar den här månaden”, kan få skapas på nytt, men ska då ange när underlaget hämtades, så att två utskrifter med olika innehåll går att skilja åt. Skriv valet i beställningen, per dokumenttyp.
Gör provet så här: hämta A:s kvitto och spara filen som kvitto-fore.pdf. Ändra sedan underlaget i testmiljön, till exempel styckpriset på en rad och kundens namn. Hämta kvittot igen som kvitto-efter.pdf. Facit: kvittonummer, datum, namn, rader och summa är desamma i båda filerna. Skiljer de sig har appen skapat kvittot på nytt, och då håller inte beställningen. Vill du också kunna se vem som ändrade underlaget och när, beställ det separat enligt artikeln om ändringshistorik i appen.
Provet kontrollerar att det synliga innehållet är oförändrat. Det bevisar inte att appen lämnar ut exakt samma filbytes; be verktyget jämföra filernas SHA-256 om du behöver kontrollera det kravet också. Vilka uppgifter ett kvitto eller intyg måste innehålla och hur länge det ska sparas avgörs av regler som den här artikeln inte tar upp.
Använd inte funktionen med riktiga kunder om något prov är underkänt eller inte genomfört: tecken som saknas, en rad som delats eller försvunnit, en fil som B kan hämta eller ett kvitto som ändrats efter att underlaget ändrats. Anteckna konto, kvittonummer, förväntat och faktiskt utfall, beskriv felet för verktyget och gör om alla fyra prov efter rättningen, eftersom en ändrad behörighetsregel också kan stänga A:s väg till det egna kvittot.
FAQ
Hur skapar jag en PDF i Lovable?
Beställ PDF:en som en funktion i appen och skriv in vad dokumentet ska innehålla, vem som får hämta det och om det ska sparas eller skapas på nytt. En PDF som Lovable tar fram åt dig i chatten stannar enligt changeloggen i konversationen och ändrar inte appens källkod. Lovables dokumentation om Storage anger att filer i privata buckets laddas ned via tillfälliga signerade länkar.
Varför syns inte å, ä och ö i PDF:en?
Typsnittet i PDF:en kan sakna tecknen. Dokumentationen för biblioteket jsPDF anger att PDF-formatets 14 standardtypsnitt där är begränsade till ASCII och att andra tecken kräver ett eget typsnitt med de tecken som behövs. Beställ ett inbäddat typsnitt och prova med en rad som innehåller å, ä och ö.
Hur får jag en tabell att fortsätta snyggt på nästa sida?
Beställ att rubrikraden upprepas på varje sida, att ingen rad delas mellan två sidor och att summan står tillsammans med minst en rad. CSS-specifikationen säger att utskriftsprogram får upprepa rubrikrader, inte att de måste, så kontrollera resultatet i själva PDF:en med en tabell som är för lång för en sida.
Ska PDF:en sparas eller skapas på nytt varje gång?
Spara den färdiga filen för kvitton och intyg, eftersom de ska visa läget när de utfärdades. En sammanställning som ska visa läget just nu kan skapas på nytt, men ska då ange när underlaget hämtades. Prova genom att ändra underlaget och hämta det sparade kvittot igen.
Källor och avgränsning
Primärkällorna kontrollerades 27 oktober 2026. Beställningen, testdata och facit är redaktionella förslag; inga prov har utförts i en verklig app. Artikeln tar inte upp regler för bokföring, kvitton eller intyg.
- Lovable: Changelog – posten om filer som Lovable tar fram i chatten, 2 april 2026.
- Lovable: Storage – privata och publika buckets, signerade länkar och en timmes giltighet för Copy URL.
- Supabase: signerade nedladdningslänkar – åtkomst utan ytterligare behörighet för den som har länken.
- jsPDF – standardtypsnitten och egna typsnitt för andra tecken.
- W3C: CSS 2.1, tabeller – upprepade rubrikrader vid utskrift.
- W3C: CSS Fragmentation Level 3 – break-inside: avoid.