vue-markdown-shiki/src/utils/downloadAsFile.ts

A Vue 3 component library that provides integration with Shiki and Markdown-it.

interface languageMap {
  [key: string]: string | undefined
}

export const generateRandomString = (length: Number, lowercase = false) => {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXY3456789' // excluding similar looking characters like Z, 2, I, 1, O, 0
  let result = ''
  for (let i = 0; i < length.valueOf(); i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  return lowercase ? result.toLowerCase() : result
}

export const programmingLanguages: languageMap = {
  javascript: '.js',
  python: '.py',
  java: '.java',
  c: '.c',
  cpp: '.cpp',
  'c++': '.cpp',
  'c#': '.cs',
  ruby: '.rb',
  php: '.php',
  swift: '.swift',
  'objective-c': '.m',
  kotlin: '.kt',
  typescript: '.ts',
  go: '.go',
  perl: '.pl',
  rust: '.rs',
  scala: '.scala',
  haskell: '.hs',
  lua: '.lua',
  shell: '.sh',
  sql: '.sql',
  html: '.html',
  css: '.css'
}

export const downloadAsFile = (lang: string, content: string, prompt: string = 'Enter file name') => {
  const fileExtension = programmingLanguages[lang] || '.file'
  const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`
  const fileName = window.prompt(prompt || '', suggestedFileName)

  if (!fileName) {
    // user pressed cancel on prompt
    return
  }

  const blob = new Blob([content], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.download = fileName
  link.href = url
  link.style.display = 'none'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
}