ไฟล์รูปภาพ HTML + CSS + JS + เดี่ยว


8

มีรูปแบบไฟล์ที่รวมเนื้อหา HTML ทั้งหมดไว้ในไฟล์เดียวหรือไม่?

แทนที่จะเป็น doc, docx, odt หรือ pdf ฉันต้องการใช้เอกสาร HTML5 เพื่อเขียนเนื้อหาของฉัน แต่นั่นเป็นปัญหาเมื่อฉันต้องการส่งไฟล์ HTML เช่นทางอีเมล ฉันจะต้องซิปแล้วแนบไปกับอีเมล แน่นอนว่ามีแสงสว่างและ. chm แต่ด้วยเหตุผลที่ชัดเจนว่าไม่ใช่วิธีที่จะไป นอกจากนี้ยังเป็นไปได้ที่จะแทรกจาวาสคริปต์และโค้ด CSS ในไฟล์ HTML สิ่งนี้มีข้อเสียเปรียบเช่นกัน: รูปภาพยังคงถูกแยกออกและการฝังไฟล์ CSS และ Javascript ภายนอกทั้งหมดลงในไฟล์ HTML หนึ่งไฟล์นั้นยุ่งยาก เครื่องมือสามารถทำสิ่งนี้โดยอัตโนมัติ แต่ปัญหาของภาพยังคงมีอยู่

แรงจูงใจที่สำคัญที่สุดในการใช้ HTML ในรูปแบบ pdf / doc / docx / odt คือ HTML นั้นไม่ได้ออกแบบมาสำหรับการพิมพ์ในขณะที่ pdf / doc / docx / odt ทั้งหมดนั้นอยู่ที่ (และไม่เหมาะสำหรับการอ่านหน้าจอ) นอกจากนี้ HTML ยังเป็นมาตรฐานที่ได้รับการยอมรับและเปิดกว้างซึ่งไม่สามารถพูดได้ในรูปแบบที่กำหนดชื่อ (odt เปิด แต่ไม่ได้รับการยอมรับอย่างกว้างขวาง)

คำตอบ:


7

การฝังทุกอย่างในไฟล์ HTML ปกติเป็นวิธีที่จะไป คุณเคยเห็นTiddlyWikiไหม? ฉันคิดว่าฉันเคยเห็นมันถูกอ้างถึงว่าเป็น "แอปพลิเคชันหน้าเดียว" - ทุกอย่างถูกฝังอยู่ในไฟล์ HTML หนึ่งไฟล์ดังนั้นจึงทำหน้าที่เหมือน (เป็นเกือบ) ซอฟต์แวร์ชิ้นเดียว ฉันไม่ได้ใช้มัน แต่ฉันคิดว่ามันค่อนข้างน่าประทับใจในทางเทคนิค

รูปภาพสามารถรวมแบบอินไลน์โดยใช้ในการเข้ารหัส base64 โดยใช้ Data URI แต่การสนับสนุนใน Internet Explorer 8 ยังไม่เสร็จสมบูรณ์ (มีข้อ จำกัด ด้านขนาด IIRC) และการสนับสนุนที่ขาดหายไปใน IE รุ่นเก่าทั้งหมด เบราว์เซอร์ที่ทันสมัยอื่น ๆ ส่วนใหญ่มีการสนับสนุนที่ดี

โปรดทราบว่าโดยทั่วไปจะเพิ่มขนาดของรูปภาพประมาณหนึ่งในสาม (เพราะคุณ "ใช้" 6 จากทุก ๆ 8 บิตต่อไบต์ดังนั้นต้องใช้อีกสามไบต์เพื่อรองรับช่องว่างนั้น)

ตัวอย่างเช่นคุณได้รับสิ่งนี้:

<img src="data:image/png;base64,<BASE64 STRING>" />

หรือสิ่งนี้:

.someClass
{
    background-image:url(data:image/png;base64,<BASE64 STRING>");
}

คุณอาจต้องการอ่านบทความ Wikipedia เกี่ยวกับData URIsมีความคิดเห็นเกี่ยวกับการสนับสนุนเบราว์เซอร์และตัวอย่างการใช้งาน


มีเครื่องมือใด ๆ (อัญมณีไข่แพ็คเกจโหนด ฯลฯ ) ที่จัดการการแปลงและการรวมหรือไม่ มีเครื่องมือที่จะอินไลน์ JS และ CSS ที่จะเห็นsrc="..."หรือhref="..."แอตทริบิวต์? แล้วแปลงภาพเป็น base64 แล้วแทนที่<img src="..."ด้วย<img src="data:image/..."?
Sukima

ฉันไม่มีความคิดฉันไม่ได้พยายามห่อบางสิ่งบางอย่างเช่นนี้ก่อนที่จะมีความต้องการที่จะมอง
DMA57361

3

ฉันคิดว่ารูปแบบ MHTML (MIME HTML) (นามสกุลไฟล์. HTT) อาจเป็นสิ่งที่คุณต้องการ สิ่งนี้รวมทุกอย่างไว้ในไฟล์เดียว (เหมือนกับอีเมล HTML) รูปภาพ ฯลฯ ถูกฝังด้วยการเข้ารหัส base64

การสนับสนุนเบราว์เซอร์มีเหตุผล IE และ Opera สามารถบันทึกและดูไฟล์ MHT ใน IE คุณเพียงแค่ "บันทึกเป็น ... " และเลือก "เก็บถาวรเว็บไฟล์เดียว (* mht)" อย่างไรก็ตาม Firefox และ Chrome ต้องการส่วนขยายเบราว์เซอร์

โดยส่วนตัวฉันอาจจะอัปโหลดเนื้อหา HTML ไปยังเว็บไซต์ (อาจมีการป้องกันด้วยรหัสผ่าน) และเพียงแค่แจกจ่ายลิงค์ ไฟล์ MHT นั้นผู้ใช้ไม่สามารถแก้ไขได้อย่างแน่นอนดังนั้นจึงต้องมีการสร้างใหม่เมื่อคุณต้องการกระจาย เมื่อรวมไฟล์ทั้งหมดเข้ากับไฟล์ MHT แล้วจะยังสามารถเข้าถึงได้ในรูปแบบ HTML หรือไม่

PDF สามารถเข้าถึงได้อย่างสมเหตุสมผล มันมีความสามารถในการอ่านหน้าจอของตัวเอง ไม่แน่ใจว่ามันจัดการภาพอย่างไร - เว้นแต่คุณจะสร้างมันด้วยเครื่องมือเฉพาะ


นอกเหนือจากข้อกำหนดทางเทคนิคแล้วยังมีข้อกำหนดขององค์กรที่จะไม่ทำงานกับมาตรฐานที่เป็นกรรมสิทธิ์ใด ๆ (อาจเปิดไฟล์ pdf แต่ยังเป็นกรรมสิทธิ์) ฉันจะดู mhtml ว่า
user45971

ดูtools.ietf.org/html/rfc2557 มันเป็นมาตรฐานเปิด มันทำให้ฉันประหลาดใจว่า IE ได้รับการสนับสนุนที่ดีกว่า Firefox (หลังชอบรูปแบบที่เป็นกรรมสิทธิ์ของตัวเอง) แต่ที่นั่นคุณก็มีแล้ว อาจมีการสนับสนุนเครื่องมือที่ดีกว่าสำหรับการพึ่งพา pdf หรือ html +
Iiridayn
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.