(続々)SVG帳票

[(続)SVG帳票](https://qiita.com/mackey1966/items/48790fb4ab799ac2fdec)の続きでページ繰越しの実例。

SVG
![スクリーンショット 2024-04-21 12.18.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56191/77640a48-5bbf-c1b1-7fbf-e1edf0b8fd31.png)

```html
<svg width="842" height="595" viewBox="0 0 842 595" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="842" height="595" fill="#F5F5F5"/>
<g id="list">
<rect width="842" height="595" fill="white"/>
<text id="next_date_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="765" y="564.636">%ND38%</tspan></text>
<text id="impl_date_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="701" y="564.636">%ID38%</tspan></text>
<text id="dm_item_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="607" y="564.636">%DI38%</tspan></text>
<text id="dm_subject_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="519" y="564.636">%DS38%</tspan></text>
<text id="gender_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="499" y="564.636">%GD38%</tspan></text>
<text id="birthday_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="436" y="564.636">%BD38%</tspan></text>
<text id="breed_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="339" y="564.636">%BR38%</tspan></text>
<text id="species_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="328" y="564.636">%SP38%</tspan></text>
<text id="pet_name_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="265" y="564.636">%PN38%</tspan></text>
<text id="address_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="140" y="564.636">%AD38%</tspan></text>
<text id="owner_name_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="76" y="564.636">%ON38%</tspan></text>
<text id="idno_38" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="20" y="564.636">%IN38%</tspan></text>
...
<text id="next_date_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="765" y="96.6364">%ND2%</tspan></text>
<text id="impl_date_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="701" y="96.6364">%ID2%</tspan></text>
<text id="dm_item_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="607" y="96.6364">%DI2%</tspan></text>
<text id="dm_subject_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="519" y="96.6364">%DS2%</tspan></text>
<text id="gender_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="499" y="96.6364">%GD2%</tspan></text>
<text id="birthday_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="436" y="96.6364">%BD2%</tspan></text>
<text id="breed_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="339" y="96.6364">%BR2%</tspan></text>
<text id="species_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="328" y="96.6364">%SP2%</tspan></text>
<text id="pet_name_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="265" y="96.6364">%PN2%</tspan></text>
<text id="address_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="140" y="96.6364">%AD2%</tspan></text>
<text id="owner_name_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="76" y="96.6364">%ON2%</tspan></text>
<text id="idno_2" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="20" y="96.6364">%IN2%</tspan></text>
<text id="next_date_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="765" y="83.6364">%ND1%</tspan></text>
<text id="impl_date_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="701" y="83.6364">%ID1%</tspan></text>
<text id="dm_item_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="607" y="83.6364">%DI1%</tspan></text>
<text id="dm_subject_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="519" y="83.6364">%DS1%</tspan></text>
<text id="gender_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="499" y="83.6364">%GD1%</tspan></text>
<text id="birthday_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="436" y="83.6364">%BD1%</tspan></text>
<text id="breed_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="339" y="83.6364">%BR1%</tspan></text>
<text id="species_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="328" y="83.6364">%SP1%</tspan></text>
<text id="pet_name_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="265" y="83.6364">%PN1%</tspan></text>
<text id="address_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="140" y="83.6364">%AD1%</tspan></text>
<text id="owner_name_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="76" y="83.6364">%ON1%</tspan></text>
<text id="idno_1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="20" y="83.6364">%IN1%</tspan></text>
<text id="next_date_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="765" y="69.6364">%NextT%</tspan></text>
<text id="impl_date_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="701" y="69.6364">%ImplT%</tspan></text>
<text id="dm_item_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="607" y="69.6364">%DmItemT%</tspan></text>
<text id="dm_subject_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="519" y="69.6364">%DmSubjectT%</tspan></text>
<text id="gender_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="499" y="69.6364">%GdT%</tspan></text>
<text id="birthday_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="436" y="69.6364">%BirthT%</tspan></text>
<text id="species_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="328" y="69.6364">%SpeciesT%</tspan></text>
<text id="pet_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="265" y="69.6364">%PetT%</tspan></text>
<text id="address_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="140" y="69.6364">%AddressT%</tspan></text>
<text id="owner_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="76" y="69.6364">%OwnerT%</tspan></text>
<text id="idno_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="20" y="69.6364">%IdNoT%</tspan></text>
<line id="horizontal_line_39" x1="18" y1="566.9" x2="826" y2="566.9" stroke="black" stroke-width="0.2"/>
<line id="horizontal_line_38" x1="18" y1="553.9" x2="826" y2="553.9" stroke="black" stroke-width="0.2"/>
...
<line id="horizontal_line_3" x1="18" y1="98.9" x2="826" y2="98.9" stroke="black" stroke-width="0.2"/>
<line id="horizontal_line_2" x1="18" y1="85.9" x2="826" y2="85.9" stroke="black" stroke-width="0.2"/>
<line id="horizontal_line_1" x1="17.9982" y1="72.75" x2="825.998" y2="72.75" stroke="black" stroke-width="0.5"/>
<text id="date" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="563" y="47.6364">%Date%</tspan></text>
<text id="period" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="20" y="45.6364">%Period%</tspan></text>
<text id="ah_name" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="12" letter-spacing="0em"><tspan x="563" y="35.8636">%AH Name%</tspan></text>
<text id="form_title" fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="14" font-weight="bold" letter-spacing="0em"><tspan x="20" y="33.5909">%Form Title%</tspan></text>
</g>
</svg>

```

Vue
```js
display: function() {
    this.uploadSvg = []
    let m = Math.ceil(this.total / this.pageSize) // pageSize: 38(1ページのレコード数)
    let mod = this.total % this.pageSize
    let item = this.dmhSearch
    for (let j = 0; j < m; j++) {
        const paper = new SvgPaper()

        // タイトル等
        paper
            .replace('%Form Title%', this.$t("DM List"))
            .replace('%Period%', this.from + "..." + this.to)
            .replace('%AH Name%', this.$store.state.control.name)
            .replace('%Date%', format(new Date(), 'Yo MMM do', {locale: this.locale}))
            .replace('%IdNoT%', this.$t("No"))
            .replace('%OwnerT%', this.$t("Owner Name"))
            .replace('%AddressT%', this.$t("Address"))
            .replace('%PetT%', this.$t("Pet Name"))
            .replace('%SpeciesT%', this.$t("Species"))
            .replace('%BirthT%', this.$t("Birthday"))
            .replace('%GdT%', this.$t("Gender"))
            .replace('%DmSubjectT%', this.$t("Class"))
            .replace('%DmItemT%', this.$t("Item"))
            .replace('%ImplT%', this.$t("Implementation Date"))
            .replace('%NextT%', this.$t("Next Date"))
            
            // 右寄せ
            .adjustText('#ah_name', 263, 'end')
            .adjustText('#date', 263, 'end')

        // Body
        let results = 'paper'            
        let i = 0

        for (let k = j * this.pageSize; k < (j == m - 1 && mod != 0 ? mod + j * this.pageSize : (j + 1) * this.pageSize); k++) {     
            i++  
            let adr = item[k].pet.owner.address1 + item[k].pet.owner.address2 + item[k].pet.owner.address3
            results += '.replace(' + '"%IN' + (i) + '%", "' + item[k].pet.owner.no + "-" + item[k].pet.no + '")' + 
                '.replace(' + '"%ON' + (i) + '%", "' + item[k].pet.owner.name_sei + " " + item[k].pet.owner.name_na + '")' + 
                '.replace(' + '"%AD' + (i) + '%", "' + (adr.length > 19 ? adr.substr(0, 19) + ".." : adr) + '")' + 
                '.replace(' + '"%PN' + (i) + '%", "' + item[k].pet.name + '")' + 
                '.replace(' + '"%SP' + (i) + '%", "' + item[k].pet.species.name + '")' + 
                '.replace(' + '"%BR' + (i) + '%", "' + (item[k].pet.breed.length > 17 ? item[k].pet.breed.substr(0, 17) + ".." : item[k].pet.breed) + '")' + 
                '.replace(' + '"%BD' + (i) + '%", "' + item[k].pet.birthday_txt + '")' + 
                '.replace(' + '"%GD' + (i) + '%", "' + item[k].pet.geneuter + '")' + 
                '.replace(' + '"%DS' + (i) + '%", "' + item[k].dmsubject.name + '")' + 
                '.replace(' + '"%DI' + (i) + '%", "' + item[k].name + '")' + 
                '.replace(' + '"%ID' + (i) + '%", "' + item[k].impl_date + '")' + 
                '.replace(' + '"%ND' + (i) + '%", "' + item[k].next_date + '")' + 
                '.adjustText("#idno_' + (i) + '", 60, "left")' + 
                '.adjustText("#owner_name_' + (i) + '", 64, "left")' + 
                '.adjustText("#address_' + (i) + '", 124, "left")' + 
                '.adjustText("#pet_name_' + (i) + '", 60, "left")' + 
                '.adjustText("#breed_' + (i) + '", 95, "left")' + 
                '.adjustText("#birthday_' + (i) + '", 60, "left")' + 
                '.adjustText("#dm_subject_' + (i) + '", 86, "left")' + 
                '.adjustText("#dm_item_' + (i) + '", 90, "left")' + 
                '.setAttribute("#idno_' + (i) + '", "font-size", ' + (item[k].pet.owner.no.length + item[k].pet.no.length) + '> 10 ? "8" : "10")' + 
                '.setAttribute("#owner_name_' + (i) + '", "font-size", ' + (item[k].pet.owner.name_sei.length + item[k].pet.owner.name_na.length) + '> 6 ? "8" : "10")' + 
                '.setAttribute("#address_' + (i) + '", "font-size", ' + adr.length + '> 15 ? "8" : "10")' + 
                '.setAttribute("#pet_name_' + (i) + '", "font-size", ' + item[k].pet.name.length + '> 7 ? "8" : "10")' + 
                '.setAttribute("#breed_' + (i) + '", "font-size", ' + item[k].pet.breed.length + '> 11 ? "8" : "10")' + 
                '.setAttribute("#birthday_' + (i) + '", "font-size", ' + item[k].pet.birthday_txt.length + '> 10 ? "8" : "10")' + 
                '.setAttribute("#dm_subject_' + (i) + '", "font-size", ' + item[k].dmsubject.name.length + '> 10 ? "8" : "10")' + 
                '.setAttribute("#dm_item_' + (i) + '", "font-size", ' + item[k].name.length + '> 10 ? "8" : "10")'
        }
        eval(results)
        
        // 足りない分を空白で埋める           
        let empty = 'paper'
        if (j == m - 1) {
            for (let i = mod; i < this.pageSize + 1; i++) {
                empty += '.replace(' + '"%IN' + i + '%", "")' + 
                    '.replace(' + '"%ON' + i + '%", "")' + 
                    '.replace(' + '"%AD' + i + '%", "")' + 
                    '.replace(' + '"%PN' + i + '%", "")' + 
                    '.replace(' + '"%SP' + i + '%", "")' + 
                    '.replace(' + '"%BR' + i + '%", "")' + 
                    '.replace(' + '"%BD' + i + '%", "")' + 
                    '.replace(' + '"%GD' + i + '%", "")' + 
                    '.replace(' + '"%DS' + i + '%", "")' + 
                    '.replace(' + '"%DI' + i + '%", "")' + 
                    '.replace(' + '"%ID' + i + '%", "")' + 
                    '.replace(' + '"%ND' + i + '%", "")'
            }
        }
        eval(empty)
        
        // DOMに適用                   
        setTimeout(() => { 
            //console.log("Apply DOM!")
            paper.apply()    
        }, this.wait)
        this.pushSvg()
    }
    this.getPdf("list")
},
```
これでこんな感じになります。
リスト
![スクリーンショット 2024-04-21 12.19.13_mosaic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56191/4d378256-41b3-5ffd-840b-9b6d7245b762.png)

（以下、SVGは省略、Vueは1ページのレコード数以外同じ）
ラベル
![スクリーンショット 2024-04-21 12.27.53_mosaic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56191/f46ddb40-5423-ab42-00c4-8e8bd0c961ff.png)

はがき
![スクリーンショット 2024-04-21 12.28.42_mosaic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56191/9028dca4-7b9c-b626-8ea7-7b5e7e7e6594.png)

---
リストやラベルのSVGをFigmaで作るのは単調で時間がかかるのでAIにやってもらおうと試したけど、文字数制限に引っ掛かってかえって効率が悪かったのでやめた。そのうち出来るようになるでしょう。