condorheroblog/vuepress-plugin-export-pdf

How do I change the URL point to the localhost and generate catalogs?

ykla opened this issue · 3 comments

ykla commented

Hi,

As your example, I add

const headerTemplate = `<div style="width: 100%; display: flex; justify-content: center; align-items: center; color: lightgray; border-bottom: solid lightgray 1px; padding-bottom: 10px; font-size: 10px;">
  <span class="title"></span>
</div>`

const footerTemplate = `<div style="width: 100%; display: flex; justify-content: center; align-items: center; color: lightgray; border-top: solid lightgray 1px; padding-top: 10px; font-size: 10px;">
  <span class="pageNumber"></span> - <span class="totalPages"></span>
</div>`
export default defineUserConfig({
  pdfOptions: {
    format: 'A4',
    displayHeaderFooter: true,
    headerTemplate,
    footerTemplate,
    margin: {
      bottom: 70,
      left: 25,
      right: 25,
      top: 70,
    },
  },
});

All in https://github.com/FreeBSD-Ask/Handbook-Next/blob/main/docs/.vuepress/vuepress-pdf.config.ts

But the output PDF pages 15-26 and the footer URL is localhost, not the real URL bsdcn.org.

QQ图片20220925110313

How can I fix the wrong localhost URL to point to the correct bsdcn.org?

Also could you please tell me here the method to generate catalogs for the PDF? Again thank you very much for your help to me.

Have you solved this problem?

ykla commented

Have you solved this problem?

NO.

I'm very sorry that it took me so long to reply. The plan at that time was indeed not perfect, but I couldn't find a good solution to these two problems for a while, and I just had some ideas recently.

After practice, the two good problems you mentioned have basically been solved.

  1. Replace the origin field in the URL
  2. Automatically add an outline to the generated PDF

To do this, I added two parameters, which are used as follows:

--pdfOutlines <pdfOutlines>: Keep PDF outlines/bookmarks
--urlOrigin <urlOrigin>: Change the origin of the print url

Link: https://github.com/condorheroblog/vuepress-plugin-export-pdf/blob/main/packages/vuepress-plugin-export-pdf-v2/README.md

I have released version 3.0.0-beta.1, you can get it on Npm, here is a screenshot of my local test, it looks great!

vuepress-pdf.config.ts

const footerTemplate = `<div style="width: 100%; display: flex; justify-content: flex-start; align-items: center; color: lightgray; border-top: solid lightgray 1px; padding-top: 10px; font-size: 10px;">
	<p style="margin-left: 10px;" class="url"></p>
</div>`

export default defineUserConfig({
	theme: defaultTheme(),
	bundler: viteBundler(),
	outFile: 'vuepress-next.pdf',
	pdfOptions: {
		displayHeaderFooter: true,
		footerTemplate,
		margin: {
			bottom: 70,
			left: 25,
			right: 25,
			top: 70,
		},
	},
	urlOrigin: "https://v2.vuepress.vuejs.org/",
	pdfOutlines: true,
})

vuepress-next-document

image