javascript - 使用 JSZip 压缩字体文件(例如 : ArialMT. ttf)不起作用

标签 javascript vue.js jszip

压缩图像和 HTML 文件工作正常,但在为 CSS 添加字体文件时;字体文件大小为 1kb,无法打开。

我尝试只压缩字体而不压缩任何其他文件,但仍然是同样的问题。

let zip = new JSZip()
let imageURLCount = 0
let fontFileCount = 0

let imageURLs = [
 'http:site.com/image1.jpg',
 'http:site.com/image2.jpg',
 'http:site.com/image3.jpg',
 'http:site.com/image4.jpg'
]

let fontFiles = [
 'http:site.com/fontFile1.ttf',
 'http:site.com/fontFile2.ttf',
 'http:site.com/fontFile3.ttf',
 'http:site.com/fontFile4.ttf'
]

// zip images
imageURLs.forEach((url, i) => {
  JSZipUtils.getBinaryContent(url, (error, data) => {
     if (error) {
        throw error
     }
     // zip file name
     imageFileName = 'image_'+i+'.jpg'

     // create images folder
     zip.folder('images')
        .file(imageFileName, data,{binary: true})

     imageURLCount++
     if (imageURLCount === imageURLs.length) {
        zipComplete(imageURLCount,fontFileCount)
     }
  })
}) // end imageURLs[] forEach 

// zip font files
fontFiles.forEach((fontFile, i) => {
  JSZipUtils.getBinaryContent(fontFile, (error, data) => {
     if (error) {
        throw error
     }

     // zip file name
     fileName = 'font_'+i+'.ttf'
     zip.file(fileName, data, {binary:true})
     fontFileCount++
     if (fontFileCount === fontFiles.length) {
        zipComplete(imageURLCount,fontFileCount)
     }
  })
}) // end fontFiles[] forEach 

// PS: zipComplete(imageURLCount,fontFileCount) checks if both arrays looped to the end and then trigger the 'file-saver' SaveAs()

我将如何压缩字体,或者是否无法使用 JSZip 压缩字体?

最佳答案

我希望编辑您的示例并在您的代码中发现问题,但事实证明没有任何问题。这是一个成功压缩 .ttf 文件然后下载 zip 的工作示例。

我猜问题出在从您的 .ttf URI 返回的内容上。

let zip = new JSZip()
let imageURLCount = 0
let fontFileCount = 0

let imageURLs = []

let fontFiles = [
  'https://fontlibrary.org/assets/fonts/symbola/cf81aeb303c13ce765877d31571dc5c7/7d8d51a2e1b57d59075325384458fac6/SymbolaRegular.ttf'
]

// zip font files
fontFiles.forEach((fontFile, i) => {
  JSZipUtils.getBinaryContent(fontFile, (error, data) => {
    if (error) {
      throw error
    }

    // zip file name
    fileName = 'font_' + i + '.ttf'
    zip.file(fileName, data, {
      binary: true
    })
    fontFileCount++
    if (fontFileCount === fontFiles.length) {
      zipComplete(imageURLCount, fontFileCount)
    }
  })
}) // end fontFiles[] forEach 
function zipComplete(imageURLCount, fontFileCount) {
  zip.generateAsync({
      type: "blob"
    })
    .then(function(content) {
      // see FileSaver.js
      saveAs(content, "example.zip");
    });
}
// PS: zipComplete(imageURLCount,fontFileCount) checks if both arrays looped to the end and then trigger the 'file-saver' SaveAs()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.2/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.1.0/jszip-utils.js"></script>
<script src="http://cdn.jsdelivr.net/g/filesaver.js"></script>

关于javascript - 使用 JSZip 压缩字体文件(例如 : ArialMT. ttf)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57138177/

相关文章:

javascript - 在 Vue 中渲染多个组件期间显示加载

c# - 从 Web API 返回时 Zip 损坏?

javascript - angularjs 如何在html中转义 “${variable}”?

javascript - 有没有办法在重定向到另一个页面后保持登录状态?

javascript - 我应该在 Vuex 操作上使用 vue-resource

javascript - 使用 JSZip 读取 zip 的内容

javascript - 打包并下载 zip 到 Google Drive 测试

javascript - 将 JSON 数据保存到服务器上

javascript - 延迟加载与 ScrollTo anchor 到 ID 滚动冲突 - 在页面中途停止

javascript - 如何在 Vue 3 中导入 svg?