<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>列印 &#8211; 記下來</title>
	<atom:link href="https://noter.tw/tag/%E5%88%97%E5%8D%B0/feed/" rel="self" type="application/rss+xml" />
	<link>https://noter.tw</link>
	<description>一路上踩到的坑、遇到的問題，一點一滴記下來，希望能幫助到需要的人~</description>
	<lastBuildDate>Fri, 11 Feb 2022 09:28:27 +0000</lastBuildDate>
	<language>zh-TW</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.6.3</generator>

<image>
	<url>https://noter.tw/wp-content/uploads/cropped-old-1130742_1920-1-32x32.jpg</url>
	<title>列印 &#8211; 記下來</title>
	<link>https://noter.tw</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Windows 10 新增網路印表機</title>
		<link>https://noter.tw/8573/printer/</link>
					<comments>https://noter.tw/8573/printer/#respond</comments>
		
		<dc:creator><![CDATA[黃小蛙]]></dc:creator>
		<pubDate>Wed, 09 Jun 2021 10:00:00 +0000</pubDate>
				<category><![CDATA[技巧分享]]></category>
		<category><![CDATA[印表機驅動程式]]></category>
		<category><![CDATA[印表機測試頁]]></category>
		<category><![CDATA[列印]]></category>
		<category><![CDATA[HP]]></category>
		<category><![CDATA[windows]]></category>
		<category><![CDATA[EPSON]]></category>
		<category><![CDATA[安裝網路印表機]]></category>
		<category><![CDATA[印表機]]></category>
		<category><![CDATA[新增網路印表機]]></category>
		<category><![CDATA[新增印表機]]></category>
		<category><![CDATA[TCP/IP]]></category>
		<category><![CDATA[印表機設定教學]]></category>
		<category><![CDATA[搜尋印表機]]></category>
		<guid isPermaLink="false">https://noter.tw/?p=8573</guid>

					<description><![CDATA[<p>安裝印表機是很多辦公族經常遇到的問題，這篇文章記錄下小蛙今天幫同事安裝網路印表機的流程。 印表機的安裝方式有很多種，小蛙辦公室使用的是網路印表機，有自己的 IP，辦公室同仁只要輸入該 IP 進行設定即&#46;&#46;&#46;</p>
<p>這篇文章 <a rel="nofollow" href="https://noter.tw/8573/printer/" data-wpel-link="internal">Windows 10 新增網路印表機</a> 最早出現於 <a rel="nofollow" href="https://noter.tw" data-wpel-link="internal">記下來</a>。</p>
]]></description>
										<content:encoded><![CDATA[
<p>安裝印表機是很多辦公族經常遇到的問題，這篇文章記錄下小蛙今天幫同事安裝網路印表機的流程。</p>



<span id="more-8573"></span>



<p>印表機的安裝方式有很多種，小蛙辦公室使用的是網路印表機，有自己的 IP，辦公室同仁只要輸入該 IP 進行設定即可進行共用，其他種類的安裝方式之後如果有遇到的話再更新上來，這篇文章主要是以 TCP/IP 新增網路印表機。</p>



<h2 class="para wp-block-heading">設定網路印表機</h2>



<p>在 Windows 10 環境下找到左下角的搜尋(放大鏡)，輸入「控制台」後進入</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3dsb2dWtkNCXV1yfgsx6xWVc_0aG8Qxx7ArBqK7zAZ8iMSKG78VAa7qQ9FcbjeaEB0RGSgCyEbGA1jWpHkkRwD4pjienND9suyWtvGPl9WbEeT8CJfncqFVlJKW-RHJheZ-gvCC3uxpTXYe_dsxN0Q6xg=w986-h851-no?authuser=2" alt="ACtC 3dsb2dWtkNCXV1yfgsx6xWVc 0aG8Qxx7ArBqK7zAZ8iMSKG78VAa7qQ9FcbjeaEB0RGSgCyEbGA1jWpHkkRwD4pjienND9suyWtvGPl9WbEeT8CJfncqFVlJKW RHJheZ gvCC3uxpTXYe dsxN0Q6xg=w986 h851 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure></div>



<p>或者在開始功能表上按滑鼠右鍵 -&gt; 點選「執行」</p>



<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img fetchpriority="high" decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3df9ZvbRhTxMVaOeWEYL0pth4lz-UX1QYNr1wpkFa8I1Q5ZP9Oxya-Fu9_8Y4Ezfja4UVpHa9eX3YaERpWxykSWart77Hj7eD_K8cqiAV3M_RF3uthzQUcFZLc3MbYTI7Jtg1BWfKv-W_q45Npx2jm0Zw=w451-h346-no?authuser=2" alt="ACtC 3df9ZvbRhTxMVaOeWEYL0pth4lz UX1QYNr1wpkFa8I1Q5ZP9Oxya Fu9 8Y4Ezfja4UVpHa9eX3YaERpWxykSWart77Hj7eD K8cqiAV3M RF3uthzQUcFZLc3MbYTI7Jtg1BWfKv W q45Npx2jm0Zw=w451 h346 no?authuser=2 Windows 10 新增網路印表機" width="338" height="260" title="Windows 10 新增網路印表機"></figure></div>



<p>輸入「control」開啟控制台</p>



<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3dj3JgqGgPV36PfpvGDxAd7QkSBpMsl1zHfWQB38Tch_atpdQPHkT0hCDJ8oCEDIax8N2R8AP5EBukWupfddLgsJYKs6zvoRaszBLj0rxspykoFJxI_7MuelcM9POXDmzT4T-34b4kxSrHWxw5g4O-wAA=w513-h260-no?authuser=2" alt="ACtC 3dj3JgqGgPV36PfpvGDxAd7QkSBpMsl1zHfWQB38Tch atpdQPHkT0hCDJ8oCEDIax8N2R8AP5EBukWupfddLgsJYKs6zvoRaszBLj0rxspykoFJxI 7MuelcM9POXDmzT4T 34b4kxSrHWxw5g4O wAA=w513 h260 no?authuser=2 Windows 10 新增網路印表機" width="385" height="195" title="Windows 10 新增網路印表機"></figure></div>



<p>找到「裝置和印表機」</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3fVKF42eEPaNOoKdIu3cAqVn_tFaqf-wRV3xGb2gJknnhjbQCFq8wGUPVlOajN3YqSnidFgWbnPJbCajkcCL2qwv5S7eUMhb6PS71JuZ15v1jsddLawPblI8SZ6zsZ7yLzg43CD76saglHhXuUwmeuJbw=w1028-h683-no?authuser=2" alt="ACtC 3fVKF42eEPaNOoKdIu3cAqVn tFaqf wRV3xGb2gJknnhjbQCFq8wGUPVlOajN3YqSnidFgWbnPJbCajkcCL2qwv5S7eUMhb6PS71JuZ15v1jsddLawPblI8SZ6zsZ7yLzg43CD76saglHhXuUwmeuJbw=w1028 h683 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure></div>



<p>新增印表機</p>



<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3esu01uriL6pbu7sVbQj-yiSlU7_88xVGUkln29qFd8q5_MlotZnWHyOVfch02ns64UYclgKUU9qof3GUQRARBnumixD1e5sKJtj9lUQnG81ZpAlexTqZ-RH85Y43a2uh6vIyCOmmzhxa6We3D6-a3gpg=w638-h691-no?authuser=2" alt="ACtC 3esu01uriL6pbu7sVbQj yiSlU7 88xVGUkln29qFd8q5 MlotZnWHyOVfch02ns64UYclgKUU9qof3GUQRARBnumixD1e5sKJtj9lUQnG81ZpAlexTqZ RH85Y43a2uh6vIyCOmmzhxa6We3D6 a3gpg=w638 h691 no?authuser=2 Windows 10 新增網路印表機" width="479" height="518" title="Windows 10 新增網路印表機"></figure></div>



<p>運氣好的話，上面會出現要新增的印表機，如果沒有的話，點選下方「我要的印表機未列出」</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3dFDiyfbGTcUaJpNNBFY2MgD4ck_CASMP3uDkbO8knrQDcDmt81fZEYd8TDGcbAm8ZWq4gF05XhOQSD42GatG7FotUR27RQ8Uan0mPP-La21UTsRMmc785i9iwoLckxktUHIJHHvbvTe-HLgcTkhgtFGA=w792-h540-no?authuser=2" alt="ACtC 3dFDiyfbGTcUaJpNNBFY2MgD4ck CASMP3uDkbO8knrQDcDmt81fZEYd8TDGcbAm8ZWq4gF05XhOQSD42GatG7FotUR27RQ8Uan0mPP La21UTsRMmc785i9iwoLckxktUHIJHHvbvTe HLgcTkhgtFGA=w792 h540 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure></div>



<p>選擇「使用 TCP/IP 位址或主機名稱新增印表機」</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3fYv5OhXCQF-RBzK3zMiCPSM2CNqEF0GszpbTloVcNAhqQWFYe88lccIwdx6RF74Y7oKrI8Dxarkr4hqUsjZZcwCpbiZk6j-ia-_fDqPFdHLUHw_HaWscUwvPEqDaO6RI-GxDjmCFU0r2zucfeP1-N_oA=w787-h571-no?authuser=2" alt="ACtC 3fYv5OhXCQF RBzK3zMiCPSM2CNqEF0GszpbTloVcNAhqQWFYe88lccIwdx6RF74Y7oKrI8Dxarkr4hqUsjZZcwCpbiZk6j ia fDqPFdHLUHw HaWscUwvPEqDaO6RI GxDjmCFU0r2zucfeP1 N oA=w787 h571 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure></div>



<p>裝置類型選擇 TCP/IP 裝置，並輸入主機名稱或 IP 位址</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3djA8rQizIWxzOsEcvfF2Uk4hPCK8ZahwvwA22WrEMyiYBayXxRxnuCHWm-n7QyufHdKr_0oGKngKwPNCp8bX5skm7pIkYJSGFgTqxpl0TAwFVcw1sbswuz8e8AOUAOdPeHvEPYAiHl5H0YS-SYSE4APQ=w787-h571-no?authuser=2" alt="ACtC 3djA8rQizIWxzOsEcvfF2Uk4hPCK8ZahwvwA22WrEMyiYBayXxRxnuCHWm n7QyufHdKr 0oGKngKwPNCp8bX5skm7pIkYJSGFgTqxpl0TAwFVcw1sbswuz8e8AOUAOdPeHvEPYAiHl5H0YS SYSE4APQ=w787 h571 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure></div>



<p>開始搜尋印表機</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3dzmwQdyuN5CgKLEOXfu6xk4abmErBEwpYSJQhRB5TQbBesG21nZoUtgbGfoY2XxeUy3JwS-CtOCbUmScAtsI1sqZIgsabiHqmHKMTXjTyEVqNMx5kZE1lZzAvcSxEF6_HVf7cxv3n6jEZpNR2BStlxbg=w787-h571-no?authuser=2" alt="ACtC 3dzmwQdyuN5CgKLEOXfu6xk4abmErBEwpYSJQhRB5TQbBesG21nZoUtgbGfoY2XxeUy3JwS CtOCbUmScAtsI1sqZIgsabiHqmHKMTXjTyEVqNMx5kZE1lZzAvcSxEF6 HVf7cxv3n6jEZpNR2BStlxbg=w787 h571 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure></div>



<p>如果之前有裝過或已經有驅動程式的電腦會出現這個畫面，隨便選一個都可以</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3elVeICr44z-yd_XxsE8Jpy_w5kfZJezn7Gs2JaN0AXduJJ-qjLo8tx3ku3v_-F6NQkXS5aQ9Ll_4CNretMZ7gwqZe7HrXU1rfiK1BiIqCwRsRcY_i_NhQItT17h9aIbfTt7tHv_ogQlV7nGgN9AKnwAA=w787-h571-no?authuser=2" alt="ACtC 3elVeICr44z yd XxsE8Jpy w5kfZJezn7Gs2JaN0AXduJJ qjLo8tx3ku3v F6NQkXS5aQ9Ll 4CNretMZ7gwqZe7HrXU1rfiK1BiIqCwRsRcY i NhQItT17h9aIbfTt7tHv ogQlV7nGgN9AKnwAA=w787 h571 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure></div>



<p>第一次新增或找不到驅動程式的話，出現以下畫面，可以 (1) 從清單中選，但不一定會出現，(2) 透過 Windows Update 安裝，但不一定會成功，(3) 從磁片安裝，先確認印表機的型號，例如小蛙的是 HP Color LaserJet M855 PCL6，就到 <a href="https://support.hp.com/tw-zh/drivers" target="_blank" rel="noreferrer noopener nofollow external" data-wpel-link="external" class="wpel-icon-right">HP 官網去下載驅動程式<span class="wpel-icon wpel-image wpel-icon-6"></span></a>，只要 Google 「HP 驅動程式」「EPSON 驅動程式」就可以找到，下載完安裝或解壓縮，並記住路徑，這邊點選從磁片安裝後選擇這個路徑，下一步後就會開始安裝。(詳細步驟可參考 <a href="https://blog.xuite.net/yh96301/blog/448626659" target="_blank" rel="noreferrer noopener nofollow external" data-wpel-link="external" class="wpel-icon-right">Windows 10新增印表機<span class="wpel-icon wpel-image wpel-icon-6"></span></a>)</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3dyTFbpVYdZ6l0MdjKcUGquscXMhWkcxFw2Buezc6W9oq87KXHeUiREqbZZ6d7wfAq5bLtABw71RB0sMcBmXH12CUDfbKTRPir8RbTKrHHg0tHkM7FAYajVtm7MJva-jj483rmZB_p9_ayLsrpeO2S8_A=w614-h453-no?authuser=2" alt="ACtC 3dyTFbpVYdZ6l0MdjKcUGquscXMhWkcxFw2Buezc6W9oq87KXHeUiREqbZZ6d7wfAq5bLtABw71RB0sMcBmXH12CUDfbKTRPir8RbTKrHHg0tHkM7FAYajVtm7MJva jj483rmZB p9 ayLsrpeO2S8 A=w614 h453 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure>



<p>設定印表機名稱，之後要列印才知道要選哪台印表機</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3c855nZK-t2MqkJtG7eDnHiVGr6gvhy7DtHHJtmdhuapjQtkD7uZ9ws_Xm87-mJIPoZ70DoOAW6Y6xX0-PkMyWGSBaf-UunnXxFN1Rt52xvawJt3h9ouWJIw3ahKXWz307mWLYdKIK7dkCA7FE2IGnnOw=w787-h571-no?authuser=2" alt="ACtC 3c855nZK t2MqkJtG7eDnHiVGr6gvhy7DtHHJtmdhuapjQtkD7uZ9ws Xm87 mJIPoZ70DoOAW6Y6xX0 PkMyWGSBaf UunnXxFN1Rt52xvawJt3h9ouWJIw3ahKXWz307mWLYdKIK7dkCA7FE2IGnnOw=w787 h571 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure></div>



<p>開始安裝</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3cVMg0Si7k4MofJD7Wkspom_h5hTMxwDI19LV3EQGyl1rcPLmyNt_NdB_JR6uwZG6vvdiWNO87KoLF8Re9xKS2EZoRBVdII1I0gIx_SZFiqsaiWQlfDZ_x6LcNn2QRwOVkCcCBDJyu7cY3PTn2lT13ZDw=w787-h571-no?authuser=2" alt="ACtC 3cVMg0Si7k4MofJD7Wkspom h5hTMxwDI19LV3EQGyl1rcPLmyNt NdB JR6uwZG6vvdiWNO87KoLF8Re9xKS2EZoRBVdII1I0gIx SZFiqsaiWQlfDZ x6LcNn2QRwOVkCcCBDJyu7cY3PTn2lT13ZDw=w787 h571 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure>



<p>設定不共用</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3dymRpdjw21amFEtDYhhdQuMwinWHsaUqA0rpeQ38r53-qNLTNWXCRwxve4FSrGLMym-ZW3eWXw2-Rv1B42RX57uePc9F_kOuyKZcFDcmceQnTL56EKIS_5ddhPLwRyKBS59sT0lHUaHo1T2AtwoRdAsg=w787-h571-no?authuser=2" alt="ACtC 3dymRpdjw21amFEtDYhhdQuMwinWHsaUqA0rpeQ38r53 qNLTNWXCRwxve4FSrGLMym ZW3eWXw2 Rv1B42RX57uePc9F kOuyKZcFDcmceQnTL56EKIS 5ddhPLwRyKBS59sT0lHUaHo1T2AtwoRdAsg=w787 h571 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure></div>



<p>新增完成，可點選列印測試頁看看是否設定正確</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3etugr2slR8gvXcyq4CWpYSzb4yNkEsRhD8U3CuO61UyPykxFB9SuSZlJtrFx7dft_9yQ4OGDK_O41OoE0mjejMT4l5A6F9LyCyL-hz6ZTT5JNvypuqNuURYr8Cs4MLuc9nsP11feg_BTRaoOwTu8w8Jg=w787-h571-no?authuser=2" alt="ACtC 3etugr2slR8gvXcyq4CWpYSzb4yNkEsRhD8U3CuO61UyPykxFB9SuSZlJtrFx7dft 9yQ4OGDK O41OoE0mjejMT4l5A6F9LyCyL hz6ZTT5JNvypuqNuURYr8Cs4MLuc9nsP11feg BTRaoOwTu8w8Jg=w787 h571 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure></div>



<p>列印出來的測試頁</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://lh3.googleusercontent.com/pw/ACtC-3cexIbNhH9lJihwjRTTvsMh4Y5_buIGDt-zYwHPKjmtE_9bHwDMQ720xyEa17Tosm-IA2bvaPU5dTVdPmAIzCX4asvhkMVjJSL0dCJp9a3t-x_mHXUqV1RqX9Oll-i7Q52Sm92jbml-VHbbKrImBtUnaw=w768-h1023-no?authuser=2" alt="ACtC 3cexIbNhH9lJihwjRTTvsMh4Y5 buIGDt zYwHPKjmtE 9bHwDMQ720xyEa17Tosm IA2bvaPU5dTVdPmAIzCX4asvhkMVjJSL0dCJp9a3t x mHXUqV1RqX9Oll i7Q52Sm92jbml VHbbKrImBtUnaw=w768 h1023 no?authuser=2 Windows 10 新增網路印表機" title="Windows 10 新增網路印表機"></figure></div>



<p><strong>Windows 相關文章</strong></p>



<ul class="my-li bg-darkblue wp-block-list"><li><a href="https://noter.tw/10439/windows-%e8%a4%87%e8%a3%bd%e6%89%80%e6%9c%89%e6%aa%94%e6%a1%88%e5%90%8d%e7%a8%b1%ef%bc%8c%e4%bb%a5%e5%8f%8a-notepad-%e5%a4%9a%e6%ac%84%e9%81%b8%e5%8f%96%e5%8f%8a%e8%a4%87%e8%a3%bd%e5%8a%9f%e8%83%bd/" data-wpel-link="internal">Windows 複製所有檔案名稱，以及 Notepad++ 多欄選取及複製功能</a></li><li><a href="https://noter.tw/8636/windows-update-error/" data-wpel-link="internal">您的裝置缺少重要的安全性和品質的修正</a></li><li><a href="https://noter.tw/8573/printer/" data-wpel-link="internal">Windows 10 新增網路印表機</a></li><li><a href="https://noter.tw/8564/samba/" data-wpel-link="internal">重設 Windows 網路芳鄰 (Samba) 記憶密碼</a></li><li><a href="https://noter.tw/4539/windows-vpn-%e8%a8%ad%e5%ae%9a-%e4%bd%bf%e7%94%a8-softether-vpn/" data-wpel-link="internal">Windows VPN 設定</a></li><li><a href="https://noter.tw/2602/windows-%e8%a8%ad%e5%ae%9a-vpn-%e9%80%a3%e7%b7%9a/" data-wpel-link="internal">Windows 設定 VPN 連線</a></li><li><a href="https://noter.tw/8645/remove-trend-micro-security-agent/" data-wpel-link="internal">Trend Micro Security Agent 移除方法</a></li><li><a href="https://noter.tw/7532/%e7%b0%a1%e5%96%ae%e5%85%a9%e6%8b%9b%ef%bc%8c%e8%a7%a3%e6%b1%ba%e8%a7%a3%e5%a3%93%e7%b8%ae-zip-%e6%aa%94%e7%9a%84%e4%ba%82%e7%a2%bc%e5%95%8f%e9%a1%8c/" data-wpel-link="internal">簡單兩招，解決解壓縮 zip 檔的亂碼問題</a></li></ul>
<p>這篇文章 <a rel="nofollow" href="https://noter.tw/8573/printer/" data-wpel-link="internal">Windows 10 新增網路印表機</a> 最早出現於 <a rel="nofollow" href="https://noter.tw" data-wpel-link="internal">記下來</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://noter.tw/8573/printer/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>JavaScript列印頁面及mailto寄信亂碼</title>
		<link>https://noter.tw/1704/javascript%e5%88%97%e5%8d%b0%e9%a0%81%e9%9d%a2%e5%8f%8amailto%e5%af%84%e4%bf%a1%e4%ba%82%e7%a2%bc/</link>
					<comments>https://noter.tw/1704/javascript%e5%88%97%e5%8d%b0%e9%a0%81%e9%9d%a2%e5%8f%8amailto%e5%af%84%e4%bf%a1%e4%ba%82%e7%a2%bc/#comments</comments>
		
		<dc:creator><![CDATA[黃小蛙]]></dc:creator>
		<pubDate>Wed, 28 Dec 2011 09:42:17 +0000</pubDate>
				<category><![CDATA[網頁前端]]></category>
		<category><![CDATA[列印]]></category>
		<category><![CDATA[亂碼]]></category>
		<category><![CDATA[mailto]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[encodeURI]]></category>
		<category><![CDATA[java.net.URLEncoder.encode]]></category>
		<category><![CDATA[print]]></category>
		<guid isPermaLink="false">http://wazai.net/?p=1704</guid>

					<description><![CDATA[<p>接續前兩篇文章，從FancyBox到達申請表頁面後，對方要求可以透過(1)印表機列印申請表，(2)透過email寄送申請表。這篇文章小蛙要來說明怎麼透過JavaScript列印頁面以及用email寄送&#46;&#46;&#46;</p>
<p>這篇文章 <a rel="nofollow" href="https://noter.tw/1704/javascript%e5%88%97%e5%8d%b0%e9%a0%81%e9%9d%a2%e5%8f%8amailto%e5%af%84%e4%bf%a1%e4%ba%82%e7%a2%bc/" data-wpel-link="internal">JavaScript列印頁面及mailto寄信亂碼</a> 最早出現於 <a rel="nofollow" href="https://noter.tw" data-wpel-link="internal">記下來</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p>接續前兩篇文章，從FancyBox到達申請表頁面後，對方要求可以透過(1)印表機列印申請表，(2)透過email寄送申請表。這篇文章小蛙要來說明怎麼透過JavaScript列印頁面以及用email寄送申請表，小蛙在處理mailto的時候遇到亂碼問題卡了一天，也會在這篇文章中說明。<br />
<span id="more-1704"></span></p>
<ul>
<li><strong><span style="color: #ff0000;">JavaScript列印頁面</span></strong></li>
</ul>
<p style="padding-left: 30px;">JavaScript列印頁面非常簡單，只需要一行就可以達成，更多詳細資料可以參考<a href="http://nievor.wordpress.com/2008/07/31/javascript_print_preview/" target="_blank" rel="noopener noreferrer nofollow external" data-wpel-link="external" class="wpel-icon-right">Javascript呼叫IE列印以及預覽列印的方法@小峰峰的筆記本<span class="wpel-icon wpel-image wpel-icon-6"></span></a>。</p>
<pre style="padding-left: 30px;">&amp;lt;input type="button" onclick="&lt;span style="color: #ff0000;"&gt;&lt;strong&gt;print()&lt;/strong&gt;&lt;/span&gt;" value="列印申請表"&amp;gt;</pre>
<ul>
<li><span style="color: #ff0000;"><strong>JavaScript寄送電子郵件</strong></span></li>
</ul>
<p style="padding-left: 30px;">JavaScript寄送電子郵件指令也非常簡單，但是隱藏的問題其實還蠻多的，小蛙先介紹寄送電子郵件的指令。</p>
<pre style="padding-left: 30px;">&lt;input type="button" onclick="sendMail(true);" value="使用Big5寄送(Outlook)"&gt;
&lt;input type="button" onclick="sendMail(false);" value="使用UTF-8寄送"&gt;</pre>
<p style="padding-left: 30px;">小蛙用了sendMail()來讓使用者自行選擇要用哪種方式寄送等等再說明原因。JavaScript程式碼寄信程式碼如下，因為小蛙只用到簡單的寄件人、主旨及內容，更多詳細設定請參閱<a href="http://ant4html.blogspot.com/2009/01/mailto.html" target="_blank" rel="noopener noreferrer nofollow external" data-wpel-link="external" class="wpel-icon-right">用mailto寄信 @ 螞蟻的HTML<span class="wpel-icon wpel-image wpel-icon-6"></span></a>：</p>
<pre style="padding-left: 30px;">&lt;script type="text/javascript"&gt;
  // 基本寄信，沒有判斷編碼
  function sendMail(){
    var text_title = "這是一封透過JavsScript寄送的郵件主旨";
    var text_body  = "這是內文的部分。";
    sendmail = "mailto:xxxx@gmail.com?subject=" + text_title;
    sendmail += "&amp;body=" + text_body;
    location.href = sendmail;
  }
&lt;/script&gt;</pre>
<p style="padding-left: 30px;">如果要用到換行的話，必須使用<span style="color: #ff0000;"><strong>%0A</strong></span>。這個範例可能有些人跑起來是OK的，有些人卻得到亂碼，接下來小蛙要記錄一下自己的做法，也許有更好的做法，但時間緊迫只好先用這種特殊方式來解決。</p>
<ul>
<li><span style="color: #ff0000;"><strong>JavaScript mailto 亂碼解決</strong></span></li>
</ul>
<p style="padding-left: 30px;">目前小蛙找不到可以自動判斷要用什麼編碼的方法，也就是像上面的兩個按鈕，透過Big5寄送，或是透過UTF-8寄送，當小蛙以為就只有那麼簡單的時候又發現還要多一個條件判斷IE。Microsoft Outlook或Outlook Express會亂碼的原因是Outlook<strong><span style="color: #ff0000;">只能接受BIG5的編碼</span></strong>，但透過頁面location.href引導過去的參數會變成<span style="color: #ff0000;"><strong>UTF-8</strong></span>，所以不管怎麼試只要編碼不是BIG5在Outlook就一定會出現亂碼，但又找不到方法可以判斷客戶端在點了按鈕之後所呼叫的是Outlook還是透過Webmail寄送，像小蛙的電腦點了之後會跳出瀏覽器，透過gmail送出郵件，而不是使用Outlook。</p>
<p style="padding-left: 30px;">要確保送出的資料一定是用BIG5來編碼，在Java可以透過以下方式編碼。</p>
<pre style="padding-left: 30px;">java.net.URLEncoder.encode("一定要轉成BIG5編碼", "BIG5");</pre>
<p style="padding-left: 30px;">小蛙直接以自己的例子來說明，所有的頁面都是透過UTF-8編碼，包括使用者輸入的表單也是，這邊卡了一個問題是java.net.URLEncoder.encode()這個是Java的function，所以必須要在Server端才可以使用，也就是說使用者輸入完的資料沒有辦法直接透過java.net.URLEncoder.encode()來處理，這邊小蛙只好把所有的參數POST到另一頁sendMail.jsp專門處理亂碼及送出，以下是sendMail.jsp中Java編碼的部分。</p>
<pre style="padding-left: 30px;">String applyName = request.getParameter("applyName") == null ? "" : new String(request.getParameter("applyName").getBytes("ISO-8859-1"), "UTF-8");
String applyNameB = java.net.URLEncoder.encode("名稱："&nbsp;&nbsp; + applyName).replaceAll("[+]", " ");</pre>
<p style="padding-left: 30px;">編碼邏輯部分如下(以下是小蛙的dirty code，JavaScript跟Java夾雜，硬要分還是可以分的開，要怎麼處理就看自己的規畫囉！)：</p>
<pre style="padding-left: 30px;">&amp;lt;script type="text/javascript"&amp;gt;
&nbsp; var text_title = "&amp;lt;%=title%&amp;gt;";
&amp;lt;%
&nbsp; //也就是按下上面的「使用Big5寄送(Outlook)」
&nbsp; if("true".equals(big5)){
%&amp;gt;
&nbsp; &nbsp; &nbsp; // 這邊無論是哪個瀏覽器都務必要使用 &lt;span style="color: #ff0000;"&gt;&lt;strong&gt;big5&lt;/strong&gt;&lt;/span&gt; 送出
&nbsp;&nbsp;&nbsp; &nbsp; text_title = "&amp;lt;%=title&lt;span style="color: #ff0000;"&gt;&lt;strong&gt;B&lt;/strong&gt;&lt;/span&gt;%&amp;gt;";
&nbsp;&nbsp; &nbsp;&nbsp; text_body&nbsp; = "%0A" + ("&amp;lt;%=applyName&lt;span style="color: #ff0000;"&gt;&lt;strong&gt;B&lt;/strong&gt;&lt;/span&gt;%&amp;gt;");
&nbsp; &nbsp; &nbsp; ....
&amp;lt;%
&nbsp; }else{
  &nbsp;&nbsp;  if("IE".equals(browser)){
%&amp;gt;
    &nbsp;&nbsp;    // 如果瀏覽器是IE，還要額外做encodeURI處理
      &nbsp;&nbsp;  text_title = &lt;strong&gt;&lt;span style="color: #ff0000;"&gt;encodeURI&lt;/span&gt;&lt;/strong&gt;(text_title);
&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text_body&nbsp; = "&lt;span style="color: #ff0000;"&gt;&lt;strong&gt;%0A&lt;/strong&gt;&lt;/span&gt;" + &lt;strong&gt;&lt;span style="color: #ff0000;"&gt;encodeURI&lt;/span&gt;&lt;/strong&gt;("名稱：&amp;lt;%=applyName%&amp;gt;");
  &nbsp;&nbsp;      ....
&amp;lt;%
    &nbsp; }else{
%&amp;gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Firefox, Chrome直接傳送即可
&nbsp;&nbsp;        text_title = (text_title);
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text_body&nbsp; = "&lt;span style="color: #ff0000;"&gt;&lt;strong&gt;%0A&lt;/strong&gt;&lt;/span&gt;" + ("物件名稱：&amp;lt;%=applyName%&amp;gt;");
&amp;lt;%
    &nbsp; }
&nbsp; }
%&amp;gt;
&nbsp; mail_str = "mailto:xxxxx@gmail.com?subject=" + text_title;
&nbsp; mail_str += "&amp;amp;body=" + text_body;
&nbsp; location.href = mail_str;
&amp;lt;/script&amp;gt;</pre>
<p>好吧！還有時間的話再來看看要不要把這些Code清乾淨一些&#8230;天啊！Web工程師最怕看到的應該就是亂碼，每次一遇到亂碼問題就會卡一段時間 &#8230; 還是希望瀏覽器的行為模式可以統一呀！上面的方法可以「手動」解決亂碼問題，讓使用者自己點選是否透過Outlook或是透過Webmail傳送，而在瀏覽器的特殊行為上小蛙也做了判斷，最有問題的IE特別隔離出來，希望之後能看到更好的做法&gt;&lt;。<br />
這方法有一些不足的地方<br />
(1)程式碼太醜，Java跟JavaScript全都混在一起(剛上面提到可以拆的開!!!)<br />
(2)沒辦法做到完全自動判斷，還要讓使用者點選<br />
(3)小蛙只測試了IE8, FF7.0.1, Chrome 16.0.912.63<br />
(4)如果使用者預設瀏覽器是IE，而透過非IE瀏覽器去點選寄送mail，有些情況可以，有些情況不行，這個部份處理起來真的沒完沒了，真正遇到再說了 = =<br />
打完收工，繼續處理其他工作，希望可以不要抱著工作跨年。</p>
<p>這篇文章 <a rel="nofollow" href="https://noter.tw/1704/javascript%e5%88%97%e5%8d%b0%e9%a0%81%e9%9d%a2%e5%8f%8amailto%e5%af%84%e4%bf%a1%e4%ba%82%e7%a2%bc/" data-wpel-link="internal">JavaScript列印頁面及mailto寄信亂碼</a> 最早出現於 <a rel="nofollow" href="https://noter.tw" data-wpel-link="internal">記下來</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://noter.tw/1704/javascript%e5%88%97%e5%8d%b0%e9%a0%81%e9%9d%a2%e5%8f%8amailto%e5%af%84%e4%bf%a1%e4%ba%82%e7%a2%bc/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
	</channel>
</rss>
