月度归档： 2015年8月

使用html新属性download自定义下载文件

在 HTML5 中可以设置 a 标签的 download 属性，实现点击超链接时直接下载文件而不是打开超链接。

代码示例：

<a href="woxinfeishi-bukezhuanye.jpg" download="我心匪石.jpg">点击下载图片</a>

Demo 示例：html-download.html

目前该属性仅 Chrome、Firefox 支持。

使用 download 属性需要注意，只有同域（来源相同）时才会得到完整支持。这一点 w3school 并没有明确指出。Mozilla 的开发文档里有一行小字：This attribute is only honored for links to resources with the same-origin.

在 Chrome 下，当 href 不同域，会以原始的名称下载文件。在 Firefox 下，当 href 不同域时，会当做普通 a 处理，直接在浏览器中打开该连接。

我们知道通过程序下载文件时，设置 Content-Disposition 头信息，可以告诉浏览器文件存储的名字。火狐浏览器会优先使用 Content-Disposition 给出的文件名。

键盘数值对照表

键盘数值对照表

按键 数值 描述
DOM_VK_CANCEL 3 Cancel key
DOM_VK_HELP 6 Help key
DOM_VK_BACK_SPACE 8 退格键
DOM_VK_TAB 9 Tab键
DOM_VK_CLEAR 12 “5” key on Numpad when NumLock is unlocked. Or on Mac, clear key which is positioned at NumLock key
DOM_VK_RETURN 13 Return/enter key on the main keyboard
DOM_VK_ENTER 14 Reserved, but not used
DOM_VK_SHIFT 16 Shift 键
DOM_VK_CONTROL 17 Ctrl 键
DOM_VK_ALT 18 Alt 键(Mac上为Option 键)
DOM_VK_PAUSE 19 Pause key
DOM_VK_CAPS_LOCK 20 Caps lock
DOM_VK_ESCAPE 27 Escape 键
DOM_VK_SPACE 32 空格键
DOM_VK_PAGE_UP 33 Page Up key
DOM_VK_PAGE_DOWN 34 Page Down key
DOM_VK_END 35 End key
DOM_VK_HOME 36 Home key
DOM_VK_LEFT 37 Left arrow
DOM_VK_UP 38 Up arrow
DOM_VK_RIGHT 39 Right arrow
DOM_VK_DOWN 40 Down arrow
DOM_VK_SELECT 41 Linux support for this keycode was added in Gecko 4.0
DOM_VK_PRINT 42 Linux support for this keycode was added in Gecko 4.0
DOM_VK_EXECUTE 43 Linux support for this keycode was added in Gecko 4.0
DOM_VK_PRINTSCREEN 44 Print Screen key
DOM_VK_INSERT 45 Ins(ert) key
DOM_VK_DELETE 46 Del(ete) key
DOM_VK_0 48
DOM_VK_1 49
DOM_VK_2 50
DOM_VK_3 51
DOM_VK_4 52
DOM_VK_5 53
DOM_VK_6 54
DOM_VK_7 55
DOM_VK_8 56
DOM_VK_9 57
DOM_VK_COLON 58 Colon (“:”) key
DOM_VK_SEMICOLON 59 Semicolon (“;”) key
DOM_VK_LESS_THAN 60 Less-than (“<“) key
DOM_VK_EQUALS 61 Equals (“=”) key
DOM_VK_GREATER_THAN 62 Greater-than (“>”) key
DOM_VK_QUESTION_MARK 63 Question mark (“?”) key
DOM_VK_AT 64 Atmark (“@”) key
DOM_VK_A 65
DOM_VK_B 66
DOM_VK_C 67
DOM_VK_D 68
DOM_VK_E 69
DOM_VK_F 70
DOM_VK_G 71
DOM_VK_H 72
DOM_VK_I 73
DOM_VK_J 74
DOM_VK_K 75
DOM_VK_L 76
DOM_VK_M 77
DOM_VK_N 78
DOM_VK_O 79
DOM_VK_P 80
DOM_VK_Q 81
DOM_VK_R 82
DOM_VK_S 83
DOM_VK_T 84
DOM_VK_U 85
DOM_VK_V 86
DOM_VK_W 87
DOM_VK_X 88
DOM_VK_Y 89
DOM_VK_Z 90
DOM_VK_CONTEXT_MENU 93
DOM_VK_NUMPAD0 96 0 on the numeric keypad
DOM_VK_NUMPAD1 97 1 on the numeric keypad
DOM_VK_NUMPAD2 98 2 on the numeric keypad
DOM_VK_NUMPAD3 99 3 on the numeric keypad
DOM_VK_NUMPAD4 100 4 on the numeric keypad
DOM_VK_NUMPAD5 101 5 on the numeric keypad
DOM_VK_NUMPAD6 102 6 on the numeric keypad
DOM_VK_NUMPAD7 103 7 on the numeric keypad
DOM_VK_NUMPAD8 104 8 on the numeric keypad
DOM_VK_NUMPAD9 105 9 on the numeric keypad
DOM_VK_MULTIPLY 106 * on the numeric keypad
DOM_VK_ADD 107 + on the numeric keypad
DOM_VK_SEPARATOR 108
DOM_VK_SUBTRACT 109 – on the numeric keypad
DOM_VK_DECIMAL 110 Decimal point on the numeric keypad
DOM_VK_DIVIDE 111 / on the numeric keypad
DOM_VK_F1 112 F1 键
DOM_VK_F2 113 F2 键
DOM_VK_F3 114 F3 键
DOM_VK_F4 115 F4 键
DOM_VK_F5 116 F5 键
DOM_VK_F6 117 F6 键
DOM_VK_F7 118 F7 键
DOM_VK_F8 119 F8 键
DOM_VK_F9 120 F9 键
DOM_VK_F10 121 F10 键
DOM_VK_F11 122 F11 键
DOM_VK_F12 123 F12 键
DOM_VK_F13 124 F13 键
DOM_VK_F14 125 F14 键
DOM_VK_F15 126 F15 键
DOM_VK_F16 127 F16 键
DOM_VK_F17 128 F17 键
DOM_VK_F18 129 F18 键
DOM_VK_F19 130 F19 键
DOM_VK_F20 131 F20 键
DOM_VK_F21 132 F21 键
DOM_VK_F22 133 F22 键
DOM_VK_F23 134 F23 键
DOM_VK_F24 135 F24 键
DOM_VK_NUM_LOCK 144 Num Lock key
DOM_VK_SCROLL_LOCK 145 Scroll Lock key
DOM_VK_CIRCUMFLEX 160 Circumflex (“^”) key
DOM_VK_EXCLAMATION 161 Exclamation (“!”) key
DOM_VK_DOUBLE_QUOTE 162 Double quote (“””) key
DOM_VK_HASH 163 Hash (“#”) key
DOM_VK_DOLLAR 164 Dollar sign (“$”) key
DOM_VK_PERCENT 165 Percent (“%”) key
DOM_VK_AMPERSAND 166 Ampersand (“&”) key
DOM_VK_UNDERSCORE 167 Underscore (“_”) key
DOM_VK_OPEN_PAREN 168 Open parenthesis (“(“) key
DOM_VK_CLOSE_PAREN 169 Close parenthesis (“)”) key
DOM_VK_ASTERISK 170 Asterisk (“*”) key
DOM_VK_PLUS 171 Plus (“+”) key
DOM_VK_PIPE 172 Pipe (“|”) key
DOM_VK_HYPHEN_MINUS 173 Hyphen/Minus (“-“) key
DOM_VK_OPEN_CURLY_BRACKET 174 Open curly bracket (“{“) key
DOM_VK_CLOSE_CURLY_BRACKET 175 Close curly bracket (“}”) key
DOM_VK_TILDE 176 Tilde (“~”) key
DOM_VK_COMMA 188 Comma (“,”) key
DOM_VK_PERIOD 190 Period (“.”) key
DOM_VK_SLASH 191 Slash (“/”) key
DOM_VK_BACK_QUOTE 192 Back tick (“`”) key
DOM_VK_OPEN_BRACKET 219 Open square bracket (“[“) key
DOM_VK_BACK_SLASH 220 Back slash (“\”) key
DOM_VK_CLOSE_BRACKET 221 Close square bracket (“]”) key
DOM_VK_QUOTE 222 Quote (”’) key
DOM_VK_META 224 Command key on Mac
DOM_VK_ALTGR 225 AltGr key on Linux
DOM_VK_WIN 91 Windows logo key on Windows. Or Super or Hyper key on Linux
DOM_VK_KANA 21 Linux support for this keycode was added in Gecko 4.0
DOM_VK_EISU 22 “英数” key on Japanese Mac keyboard
DOM_VK_JUNJA 23 Linux support for this keycode was added in Gecko 4.0
DOM_VK_FINAL 24 Linux support for this keycode was added in Gecko 4.0
DOM_VK_HANJA 25 Linux support for this keycode was added in Gecko 4.0
DOM_VK_KANJI 25 Linux support for this keycode was added in Gecko 4.0
DOM_VK_CONVERT 28 Linux support for this keycode was added in Gecko 4.0
DOM_VK_NONCONVERT 29 Linux support for this keycode was added in Gecko 4.0
DOM_VK_ACCEPT 30 Linux support for this keycode was added in Gecko 4.0
DOM_VK_MODECHANGE 31 Linux support for this keycode was added in Gecko 4.0
DOM_VK_SLEEP 95 Linux support for this keycode was added in Gecko 4.0

数值到按键名对照关系

var mapCodeName = {
    3: "cancel",
    6: "help",
    8: "back_space",
    9: "tab",
    12: "clear",
    13: "return",
    14: "enter",
    16: "shift",
    17: "control",
    18: "alt",
    19: "pause",
    20: "caps_lock",
    27: "escape",
    32: "space",
    33: "page_up",
    34: "page_down",
    35: "end",
    36: "home",
    37: "left",
    38: "up",
    39: "right",
    40: "down",
    41: "select",
    42: "print",
    43: "execute",
    44: "printscreen",
    45: "insert",
    46: "delete",
    48: "0",
    49: "1",
    50: "2",
    51: "3",
    52: "4",
    53: "5",
    54: "6",
    55: "7",
    56: "8",
    57: "9",
    58: "colon",
    59: "semicolon",
    60: "less_than",
    61: "equals",
    62: "greater_than",
    63: "question_mark",
    64: "at",
    65: "a",
    66: "b",
    67: "c",
    68: "d",
    69: "e",
    70: "f",
    71: "g",
    72: "h",
    73: "i",
    74: "j",
    75: "k",
    76: "l",
    77: "m",
    78: "n",
    79: "o",
    80: "p",
    81: "q",
    82: "r",
    83: "s",
    84: "t",
    85: "u",
    86: "v",
    87: "w",
    88: "x",
    89: "y",
    90: "z",
    93: "context_menu",
    96: "numpad0",
    97: "numpad1",
    98: "numpad2",
    99: "numpad3",
    100: "numpad4",
    101: "numpad5",
    102: "numpad6",
    103: "numpad7",
    104: "numpad8",
    105: "numpad9",
    106: "multiply",
    107: "add",
    108: "separator",
    109: "subtract",
    110: "decimal",
    111: "divide",
    112: "f1",
    113: "f2",
    114: "f3",
    115: "f4",
    116: "f5",
    117: "f6",
    118: "f7",
    119: "f8",
    120: "f9",
    121: "f10",
    122: "f11",
    123: "f12",
    124: "f13",
    125: "f14",
    126: "f15",
    127: "f16",
    128: "f17",
    129: "f18",
    130: "f19",
    131: "f20",
    132: "f21",
    133: "f22",
    134: "f23",
    135: "f24",
    144: "num_lock",
    145: "scroll_lock",
    160: "circumflex",
    161: "exclamation",
    162: "double_quote",
    163: "hash",
    164: "dollar",
    165: "percent",
    166: "ampersand",
    167: "underscore",
    168: "open_paren",
    169: "close_paren",
    170: "asterisk",
    171: "plus",
    172: "pipe",
    173: "hyphen_minus",
    174: "open_curly_bracket",
    175: "close_curly_bracket",
    176: "tilde",
    188: "comma",
    190: "period",
    191: "slash",
    192: "back_quote",
    219: "open_bracket",
    220: "back_slash",
    221: "close_bracket",
    222: "quote",
    224: "meta",
    225: "altgr",
    91: "win",
    21: "kana",
    22: "eisu",
    23: "junja",
    24: "final",
    25: "hanja",
    28: "convert",
    29: "nonconvert",
    30: "accept",
    31: "modechange",
    95: "sleep"
};