开发中常用的插件保存

pq_hz

于 2021-02-01 17:23:43 发布

阅读量117

点赞数

分类专栏：前端插件

本文链接：https://blog.csdn.net/weixin_50746784/article/details/113524921

版权

前端插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

视频播放：VideoPlayer
pdf预览：Pdfh5
表格滚动：vue-seamless-scroll
pdf下载：

    downloadPdf() {
      const printOuter = $('#entDetailPage')
      printOuter.addClass('to-pdf')
      const that = this
      // 插件生成base64img图片。
      html2canvas($('#entDetailPage')[0]).then(canvas => {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度;
        const pageHeight = (contentWidth / 592.28) * 841.89
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight
        // 页面偏移
        let position = 0
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        const imgWidth = 595.28
        const imgHeight = (592.28 / contentWidth) * contentHeight
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        // 注①
        const pdf = new JsPdf('', 'pt', 'a4')
        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            // arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            // 避免添加空白页
            if (leftHeight > 0) {
              // 注②
              pdf.addPage()
            }
          }
        }
        pdf.save(`${that.entData.entName}.pdf`)
        printOuter.removeClass('to-pdf')
    },

下载word：

    downloadWord() {
      const that = this
      const printOuter = $('#entDetailPage')
      printOuter.addClass('to-word')
      $('#entDetailPage').wordExport(
        that.entData.entName,
        '* {color: red;} .download-btn {display: none;} .indicator-table { display: none;}'
      )
    },

import wordExport from '@utils/jquery.word.export'
// 导入js文件
import saveAs from 'file-saver'
import $ from 'jquery'

if (typeof $ !== 'undefined' && typeof saveAs !== 'undefined') {
  (function() {
    $.fn.wordExport = function(fileName, rules) {
      fileName = typeof fileName !== 'undefined' ? fileName : 'jQuery-Word-Export'
      var static_ = {
        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">\n<style>\n_styles_\n</style>\n</head>\n',
          body: '<body>_body_</body>'
        }
      }
      var options = {
        maxWidth: 624
      }
      // Clone selected element before manipulating it
      var markup = $(this).clone()

      // Remove hidden elements from the output
      markup.each(function() {
        var self = $(this)
        if (self.is(':hidden')) {
          self.remove()
        }
      })
      $(markup).find('.yxjc-table:nth-child(1)').css('width', '100%')
      $(markup).find('.yxjc-table:nth-child(2)').remove()

      // Embed all images using Data URLs
      var images = Array()
      var img = markup.find('img')
      for (var i = 0; i < img.length; i++) {
        // 如果导出的word文件里面包含线上的图片
        // Calculate dimensions of output image
        // var width = Math.min(img[i].width, options.maxWidth)
        // var height = img[i].height * (width / img[i].width)
        // // Create canvas for converting image to data URL
        // // 这是添加的代码--------------------------------------------
        // var img_id = '#' + img[i].id
        // $('<canvas>').attr('id', 'test_word_img_' + i).width(width).height(height).insertAfter(img_id)

        // 如果导出的word文件里面包含本地图片用这一段，如果都包含，要另外研究一下
        // Calculate dimensions of output image
        var w = Math.min(img[i].width, options.maxWidth)
        var h = img[i].height * (w / img[i].width)
        // Create canvas for converting image to data URL
        var canvas = document.createElement('CANVAS')
        canvas.width = w
        canvas.height = h
        // Draw image to canvas
        var context = canvas.getContext('2d')
        context.drawImage(img[i], 0, 0, w, h)
        // Get data URL encoding of image
        var uri = canvas.toDataURL('image/png')
        $(img[i]).attr('src', img[i].src)
        img[i].width = w
        img[i].height = h
        // Save encoded image to array
        images[i] = {
          type: uri.substring(uri.indexOf(':') + 1, uri.indexOf(';')),
          encoding: uri.substring(uri.indexOf(';') + 1, uri.indexOf(',')),
          location: $(img[i]).attr('src'),
          data: uri.substring(uri.indexOf(',') + 1)
        }
      }

      // Prepare bottom of mhtml file with image data
      var mhtmlBottom = '\n'
      for (var i = 0; i < images.length; i++) {
        mhtmlBottom += '--NEXT.ITEM-BOUNDARY\n'
        mhtmlBottom += 'Content-Location: ' + images[i].location + '\n'
        mhtmlBottom += 'Content-Type: ' + images[i].type + '\n'
        mhtmlBottom += 'Content-Transfer-Encoding: ' + images[i].encoding + '\n\n'
        mhtmlBottom += images[i].data + '\n\n'
      }
      mhtmlBottom += '--NEXT.ITEM-BOUNDARY--'

      // TODO: load css from included stylesheet
      var styles = rules

      // Aggregate parts of the file together
      var fileContent = static_.mhtml.top.replace('_html_', static_.mhtml.head.replace('_styles_', styles) + static_.mhtml.body.replace('_body_', markup.html())) + mhtmlBottom

      // Create a Blob with the file contents
      var blob = new Blob([fileContent], {
        type: 'application/msword;charset=utf-8'
      })
      $(this).removeClass('to-word')
      saveAs.saveAs(blob, fileName + '.doc')
    }
  })($)
} else {
  if (typeof $ === 'undefined') {
    console.error('jQuery Word Export: missing dependency (jQuery)')
  }
  if (typeof saveAs === 'undefined') {
    console.error('jQuery Word Export: missing dependency (FileSaver.js)')
  }
}