我尝试以pdf格式查看组件的内容。我正确地收到了一个pdf，但它只打印了标题。当它应该打印时，它却返回了一个空白文本，好像它没有格式化。
此外，内容是打印奇怪的pdf（这是非常紧张。
我正在附加示例文件.

这是我在pdf中使用的组件：https://github.com/parallax/jsPDF
下面是代码：

<div ref="content">
<button class="btn btn-green" @click="downloadPDF">Download PDF</button>

                <div class="container mx-auto items-start md:items-center justify-between px-6 pt-5 md:px-32 md:pt-12 border-t border-gray-200">
                    <div class="border-b border-gray-200">
                        <h4 class="text-3xl font-bold leading-tight text-gray-800 dark:text-gray-100 pb-6">{{ test.title }}</h4> 
                        <ul aria-label="current Status" class="space-y-1.5 text-gray-600 dark:text-gray-400 text-sm">
                            <li class="flex items-center mr-4">
                                <div class="mr-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-tabler" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#52525B" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M8 9l3 3l-3 3"></path>
                                        <line x1="13" y1="15" x2="16" y2="15"></line>
                                        <rect x="4" y="4" width="16" height="16" rx="4"></rect>
                                    </svg>
                                </div> 
                                <span>Relates to</span>
                            </li> 
                            <li class="flex items-center mr-4">
                                <div class="mr-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit-circle" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#52525B" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M12 15l8.385 -8.415a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3z"></path>
                                        <path d="M16 5l3 3"></path>
                                        <path d="M9 7.07a7.002 7.002 0 0 0 1 13.93a7.002 7.002 0 0 0 6.929 -5.999"></path>
                                    </svg>
                                </div> 
                                <span>Edit on</span> 
                                <span class="text-gray-400 ml-1">{{ test.updated_at }}</span>
                            </li> 
                            <li class="flex items-center mr-4 pb-8">
                                <div class="mr-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-tag" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#52525B" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M11 3l9 9a1.5 1.5 0 0 1 0 2l-6 6a1.5 1.5 0 0 1 -2 0l-9 -9v-4a4 4 0 0 1 4 -4h4"></path>
                                        <circle cx="9" cy="9" r="2"></circle>
                                    </svg>
                                </div> 
                                <span>Labels</span> 
                                <span class="btn bg-purple-100 text-purple-700 px-1 py-0 ml-1">{{ test.category }}</span>
                            </li>                                                                 
                        </ul>
                    </div> 
                </div>



              <div>
                <dl>                       
                  <div class="px-6 py-5 md:px-32 md:pt-8 md:pb-20">
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <div v-html="test.content"></div>
                    </dd>
                  </div>
                </dl>
              </div>
            </div>

这是脚本的一部分：

downloadPDF() {
const doc = new jsPDF('p', 'pt', 'a4');
          doc.html(this.$refs.content.innerHTML, {
          callback: function (doc) {
            doc.save('op.pdf');
          },
          x: 1,
          y: 1,
          
        });}