BLOB实现将网页内容保存为word下载

GiGi-L

已于 2022-06-02 17:08:45 修改

阅读量903

点赞数

分类专栏： js BLOB 文章标签：前端 javascript

于 2022-06-02 17:03:11 首次发布

本文链接：https://blog.csdn.net/loria1/article/details/125103000

版权

本文档介绍了如何在前端使用JavaScript实现将网页内容保存为Word文档的功能，避免依赖外部库。通过获取指定ID的元素内容，结合HTML、CSS样式，并处理图片为Base64，最终生成可下载的Word文件。

摘要由CSDN通过智能技术生成

前端时间遇到一个需求，需要将网页内容保存为word下载，当时实现了，前几天又在前端群遇到小伙伴问相同的问题，跟他分享了代码。觉得既然有人遇到了一样的需求，那我就干脆整理下一记录和分享吧，其实有现成的插件叫fileSave.js 但是是依赖JQuery的，像我这种人能不不加依赖就不加依赖，能自己写就自己写的脾气，当然是自己写了，其实也不复杂直接上代码吧。具体实现方法：

  const exportWord = () => {
    //gigi 原生实现方式
    const statics = {
      mhtml: {
        top:
          'Mime-Version: 1.0\nContent-Base: ' +
          location.href +
          '\nContent-Type: Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset="utf-8"\nContent-Location: ' +
          location.href +
          '\n\n<!DOCTYPE html>\n<html>\n_html_</html>',
        head: '<head>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8&