vue实现导出word文档和PDF？

vue中导出word文档和PDF功能怎么实现？导出word文档和PDF的功能是需要调接口还是纯前端实现？

可以直接调接口，也可以前端自己实现

导出Word

let url = `${this.$url}/uploadFile/uploadResume`;
            let html = this.getHtmlContent();
            // 构造blob文件流
            let html_ = new Blob([html],{ "type" : "text/html;charset=utf-8" })
            let formdata = new FormData();
            formdata.append('file', html_, `sdf.html`);//sdf.html是设置文件名
            axios({
                method: 'post',
                url: url,
                data:formdata,
                responseType:'blob',//这里如果不设置，下载会打不开文件
            })
            .then(res=>{
                console.log('download res',res);
                //通过后台返回 的word文件流设置文件名并下载
                var blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
                var downloadElement = document.createElement('a');
                var href = window.URL.createObjectURL(blob); //创建下载的链接
                downloadElement.href = href;
                downloadElement.download ='s.doc'; //下载后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
                window.URL.revokeObjectURL(href); //释放掉blob对象
            })

导出PDF

// 下面两个package要单独安装
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
 
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function (id,title) {
      html2Canvas(document.querySelector(`#${id}`), {
        // allowTaint: true
        useCORS:true//看情况选用上面还是下面的，
      }).then(function (canvas) {
            let contentWidth = canvas.width
            let contentHeight = canvas.height
            let pageHeight = contentWidth / 592.28 * 841.89
            let leftHeight = contentHeight
            let position = 0
            let imgWidth = 595.28
            let imgHeight = 592.28 / contentWidth * contentHeight
            let pageData = canvas.toDataURL('image/jpeg', 1.0)
            let PDF = new JsPDF('', 'pt', 'a4')
            if (leftHeight < pageHeight) {
                PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
            } else {
            while (leftHeight > 0) {
                  PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                  leftHeight -= pageHeight
                  position -= 841.89
                  if (leftHeight > 0) {
                      PDF.addPage()
                  }
              }
            }
            PDF.save(title + '.pdf')
        }
      )
    }
  }
}

详细内容可参考

vue导出html、word和pdf_weixin_34289454的博客-CSDN博客 导出的页面组件如下：<template> <div id="resumeId"> <resumeHtml ref="resume" @on-download="download"/> </div></template>1、导出html方法... https://blog.csdn.net/weixin_34289454/article/details/88768689

如有帮助，采纳支持一下，谢谢。

第一种:window.open.href = '后端返回的下载地址'（默认就会下载下来服务器的文件）

第二种:a标签 href下载获取后端返还的二进制流转成base64 定义download下载名称（实现以前端a标签跳转的方式，封装一个文件下载）