(続)SVG帳票の続きでページ繰越しの実例。
SVG
<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
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")
},
これでこんな感じになります。
リスト
（以下、SVGは省略、Vueは1ページのレコード数以外同じ）
ラベル
はがき
リストやラベルのSVGをFigmaで作るのは単調で時間がかかるのでAIにやってもらおうと試したけど、文字数制限に引っ掛かってかえって効率が悪かったのでやめた。そのうち出来るようになるでしょう。