index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
</body>
</html>
App.vue
<script setup lang="ts">
import { Previewer } from 'pagedjs';
</script>
<template>
<div class="pagedjs_pages">
Lorem ipsum dolor, sit amet consec.......
hellllloooooo!!!!!
</div>
<!-- hellllloooooo!!! disappeared -->
css in App.vue
@page {
size: A4 landscape;
// tried size: 297mm 210mm;
}
result:
what I expected is an A4 landscape page, but it seems like, the "page" is landscape, which is correct, but the content is like vertical A4, and not showing my full content, cut the rest content at bottom, which part did I miss? https://i.sstatic.net/Id59q.jpg https://i.sstatic.net/1SuZh.png